ckeditor5
ckeditor5 copied to clipboard
Why are the images in my html wrapped by html-object?
📝 Provide detailed reproduction steps (if any)
- Add GeneralHtmlSupport plugin
- Set data as an HTML string
- 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
❌ Actual result
❓ 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?