如何自定义CKEditor 5中的HTML源

发布于 2025-02-03 19:19:56 字数 988 浏览 4 评论 0原文

我能够让CKEditor正确显示solceediting插件。我要做的是自定义ckeditor，因此当我上传图像而不是像这样的图像源时：

<figure class="image image-style-side">
    <img src="https://c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg">
    <figcaption>
        One language, one person.
    </figcaption>
</figure>

我希望它显示在像这样的屏幕宽度时显示不同大小的图像：

<picture class="image image-style-side">
  <source media="(max-width: 799px)" https://small-c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg">
  <source media="(min-width: 800px)" https://medium-c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpgg">
  <img src="elva-800w.jpg" alt="https://largmc-.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpgElva">
</picture>

甚至是这样的东西？

原文

I'm able to get the ckeditor to display the sourceEditing plugin correctly. What I'm trying to do is customize the ckeditor so when I upload an image instead of the image source being something like this:

<figure class="image image-style-side">
    <img src="https://c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg">
    <figcaption>
        One language, one person.
    </figcaption>
</figure>

I want it to display images of different size when depending on screen width like this:

<picture class="image image-style-side">
  <source media="(max-width: 799px)" https://small-c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg">
  <source media="(min-width: 800px)" https://medium-c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpgg">
  <img src="elva-800w.jpg" alt="https://largmc-.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpgElva">
</picture>

Is something like this even possible?

分享到QQ

分享到微博