CKeditor5 自定义配置Heading

位置:首页>博客>详情   分类:WEB基础   阅读(274)   2023-03-28 11:29:14

CKeditor无论那个版本,在我主要以文章编辑的时候,需要去掉默认的H1标签,所以需要自定义配置heading标签。同样CKeditor5 与之前的4版本有所不同。

CKeditor5自定义配置Heading

配置参考:

ClassicEditor
    .create( document.querySelector( '#contentHtml' ), {
        licenseKey: '',
        //heading
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { 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' }
            ]
        }
    } )
    .then( editor => {
        editor.setData($('#cocntentScript').html());
        window.editor = editor;
    } )
    .catch( error => {
        console.error( 'Oops, something went wrong!' );
        console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
        console.warn( 'Build id: l1txv9x2i4j9-f8u2t0fifydx' );
        console.error( error );
    } );

以上配置完成了ckeditor5 heading自定义配置。

标签: ckeditor5
地址:https://www.leftso.com/article/1126.html