ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

Why are the images in my html wrapped by html-object?

Open Bubble2 opened this issue 7 months ago • 0 comments

📝 Provide detailed reproduction steps (if any)

  1. Add GeneralHtmlSupport plugin
  2. Set data as an HTML string
  3. Some codes are as follows
import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor, Bold, Underline, Essentials, Italic, Mention, Paragraph, Undo, GeneralHtmlSupport, FontColor, FontBackgroundColor, HtmlComment, SpecialCharacters, SpecialCharactersEssentials } from 'ckeditor5';
import { SpecialCharactersEmoji } from './features'
import enTranslations from 'ckeditor5/translations/en.js';
import zhCnTranslations from 'ckeditor5/translations/zh-cn.js';
import 'ckeditor5/ckeditor5.css';


<CKEditor
    editor={ClassicEditor}
    data={value}
    onChange={(event, editor) => {
      onChange(editor.data.get());
    }}
    config={{
      toolbar: {
        items: ['bold', "underline", 'italic', 'fontColor', 'fontBackgroundColor', "specialCharacters", "undo", "redo"],
      },
      plugins: [
        Bold, Underline, Essentials, Italic, Mention, Paragraph, Undo, FontColor, FontBackgroundColor, GeneralHtmlSupport, 
        SpecialCharacters,
        SpecialCharactersEmoji,
        SpecialCharactersEssentials,
      ],
      htmlSupport: {
        allow: [
          // Enables all HTML features.
          {
            name: /.*/,
            attributes: true,
            classes: true,
            styles: true,
          },
        ],
        disallow: [
          {
            attributes: [
              { key: /.*/, value: /data:(?!image\/(png|jpeg|gif|webp))/i },
            ],
          },
        ],
      },
      translations: [enTranslations, zhCnTranslations],
      language: localStorage.getItem("lang") == "CN" ? "zh-cn" : "en",
    }}
    className={styles.richEditorHeight}
    onBlur={() => setRichFirst(true)}
    onFocus={() => setRichFirst(false)}
  />

✔️ Expected result

企业微信截图_d758177d-d6a5-448c-b32d-98b5c8188b25 image

❌ Actual result

企业微信截图_b722bc3a-2296-4729-b361-a1cc73693482 image

❓ Possible solution

The original image tags in the red box have an additional html-object added to them. I don’t know why this html object is added. At the same time, an extra layer of p tags is wrapped around it. Can these additional things be removed?

Bubble2 avatar Jul 01 '24 02:07 Bubble2