In ckeditor5, how to keep the span inside h1

Question

In ckeditor5, how to keep the span inside h1

310 Views Asked by ITW At 05 April 2023 at 01:24

Below shows the ckeditor config in used.

Below is the CKEditor config in use.

A few strange behaviors are being observed:

The snippet result below shows that h1 becomes h2, but style="font-size:22px;" is kept.
In the local environment, h1 is still there, but the style="font-size:22px;" was dropped from h1.
In the local environment, the first
in the root will be converted to

Any explanation about above?



<!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>

Original Q&A

There are 1 best solutions below

**ITW** · Answer 1 · 2023-04-05T02:44:12.110000

Found out that the issue is due to

the convention set by ckeditor, which automatically convert h1 > h2. The Solution is to set the heading.options config to override the default mapping.
the Title Plugin. The solution is to remove it from 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,
                        },
                    ],
                },
                heading: {
                    options: [
                        {
                            model: 'paragraph',
                            title: 'Paragraph',
                            class: 'ck-heading_paragraph',
                        },
                        {
                            model: 'heading1',
                            view: 'h1',
                            title: 'Heading 1',
                            class: 'ck-heading_heading1',
                        },
                        {
                            model: 'heading2',
                            view: 'h2',
                            title: 'Heading 2',
                            class: 'ck-heading_heading2',
                        },
                        {
                            model: 'heading3',
                            view: 'h3',
                            title: 'Heading 3',
                            class: 'ck-heading_heading3',
                        },
                        {
                            model: 'heading4',
                            view: 'h4',
                            title: 'Heading 4',
                            class: 'ck-heading_heading4',
                        },
                        {
                            model: 'heading5',
                            view: 'h5',
                            title: 'Heading 5',
                            class: 'ck-heading_heading5',
                        },
                        {
                            model: 'heading6',
                            view: 'h6',
                            title: 'Heading 6',
                            class: 'ck-heading_heading6',
                        },
                    ],
                },
                removePlugins: [
                    'CKBox',
                    'Title',
                    '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>

In ckeditor5, how to keep the span inside h1

There are 1 best solutions below

Related Questions in CKEDITOR5

Related Questions in HTML-HEADING

Trending Questions

Popular # Hahtags

Popular Questions