如何在CKEditor5中显示自定义HTML元素？（CKEditor4升级兼容问题）

问题原因 #

CKEditor5的内容解析机制比CKEditor4更严格，默认会忽略未明确配置渲染规则的自定义元素。即便开启了htmlSupport允许所有标签，若未指定元素的渲染模式（块级/内联），编辑器仍无法正确识别并渲染这些自定义标签，最终导致内容空白。

解决方案 #

修改htmlSupport配置，为自定义标签明确指定渲染模式（block或inline），让编辑器知晓如何处理这些元素。以下是调整后的完整代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            #container {
                width: 1000px;
                margin: 20px auto;
            }
            .ck-editor__editable[role="textbox"] {
                min-height: 200px;
            }
            .ck-content .image {
                max-width: 80%;
                margin: 20px auto;
            }
            /* 可选：给自定义标签加样式，方便区分显示 */
            .ck-content whatsapp,
            .ck-content wechat {
                display: block;
                padding: 8px;
                margin: 10px 0;
                border-left: 4px solid #25d366;
                background-color: #f0f9ff;
            }
        </style>
        <div id="container">
            <div id="editor">
            </div>
        </div>
        <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/super-build/ckeditor.js"></script>

        <script>
            CKEDITOR.ClassicEditor.create(document.getElementById("editor"), {
                toolbar: {
                    items: [
                        'sourceEditing'
                    ],
                    shouldNotGroupWhenFull: true
                },

                htmlSupport: {
                    allow: [
                        // 保留对所有标准标签的支持
                        {
                            name: /.*/,
                            attributes: true,
                            classes: true,
                            styles: true
                        },
                        // 为自定义标签指定块级渲染模式
                        {
                            name: 'whatsapp',
                            mode: 'block'
                        },
                        {
                            name: 'wechat',
                            mode: 'block'
                        }
                    ]
                },

                removePlugins: [
                    'CKBox',
                    'CKFinder',
                    'EasyImage',
                    'RealTimeCollaborativeComments',
                    'RealTimeCollaborativeTrackChanges',
                    'RealTimeCollaborativeRevisionHistory',
                    'PresenceList',
                    'Comments',
                    'TrackChanges',
                    'TrackChangesData',
                    'RevisionHistory',
                    'Pagination',
                    'WProofreader',
                    'MathType'
                ]
            }).then(editor => {
                    let mydata = '<div>hello world</div><whatsapp>hi whatsapp</whatsapp><wechat>hey wechat</wechat><div>bye world</div>';
                     editor.setData(mydata)
            });
        </script>
    </body>
</html>

关键说明 #

• mode: 'block'：将自定义标签标记为块级元素，渲染逻辑类似<div>；若需要内联显示，可改为mode: 'inline'。
• 自定义样式：添加CSS规则能让自定义标签在编辑器中更直观展示，便于编辑时区分内容。
• 通用规则保留：原有htmlSupport的通用配置确保标准HTML标签和属性不受影响。

内容的提问来源于stack exchange，提问作者ITW