在ckeditor5中，如何保持h1内的span

Question

下面显示了使用的ckeditor配置。

下面是正在使用的CKEditor配置。

观察到一些奇怪的行为：

下面的片段结果显示 h1 变成了 h2，但是 style="font-size:22px;"被保留。
本地环境下，h1还在，只是style="font-size:22px;"从 h1 中删除。
在本地环境中，根中的第一个
会被转换为

以上有什么解释吗？



<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            #container {
                width: 1000px;
                margin: 20px auto;
            }
            .ck-editor__editable[role="textbox"] {
                /* editing area */
                min-height: 200px;
            }
            .ck-content .image {
                /* block images */
                max-width: 80%;
                margin: 20px auto;
            }
        </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
                        }
                    ]
                },

                removePlugins: [
                    'CKBox',
                    'CKFinder',
                    'EasyImage',
                    'RealTimeCollaborativeComments',
                    'RealTimeCollaborativeTrackChanges',
                    'RealTimeCollaborativeRevisionHistory',
                    'PresenceList',
                    'Comments',
                    'TrackChanges',
                    'TrackChangesData',
                    'RevisionHistory',
                    'Pagination',
                    'WProofreader',
                    'MathType'
                ]
            }).then(editor => {
                    let mydata = '<h1 style="font-size:22px;"><span>hi</span>hello world</h1>';
                     editor.setData(mydata)
            });
        </script>
    </body>
</html>

Answer 1

发现问题是由于

ckeditor设定的约定，自动转换h1 > h2。解决方案是设置 heading.options 配置以覆盖默认映射。
标题插件。解决方案是将其从 superbuild 中删除。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            #container {
                width: 1000px;
                margin: 20px auto;
            }
            .ck-editor__editable[role="textbox"] {
                /* editing area */
                min-height: 200px;
            }
            .ck-content .image {
                /* block images */
                max-width: 80%;
                margin: 20px auto;
            }
        </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
                        }
                    ]
                },

                removePlugins: [
                    'CKBox',
                    'CKFinder',
                    'EasyImage',
                    'RealTimeCollaborativeComments',
                    'RealTimeCollaborativeTrackChanges',
                    'RealTimeCollaborativeRevisionHistory',
                    'PresenceList',
                    'Comments',
                    'TrackChanges',
                    'TrackChangesData',
                    'RevisionHistory',
                    'Pagination',
                    'WProofreader',
                    'MathType'
                ]
            }).then(editor => {
                    let mydata = '<h1 style="font-size:22px;"><span>hi</span>hello world</h1>';
                     editor.setData(mydata)
            });
        </script>
    </body>
</html>

在ckeditor5中，如何保持h1内的span

问题描述投票：0回答：1

1个回答

最新问题

在ckeditor5中，如何保持h1内的span

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1