如何允许CKEditor自定义构建中的所有内容，我想进行内联样式，但未授权

Question

这是我的ckeditor.js文件，

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';

//..

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    //..
    
  PluginProcedure,
  InsertTable
];

// Editor configuration.
ClassicEditor.defaultConfig = {

    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
      'table',
      'essentials',
      'procedurePlugin',
      'insertTable'

        ]
    },
    image: {
        toolbar: [
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            '|',
            'toggleImageCaption',
            'imageTextAlternative'
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells'
        ]
    },

    // This value must be kept in sync with the language defined in webpack.config.js.
    language: 'en'
};

我想使用setData（）在自定义插件中添加inline css 但是内联样式或类不起作用

的是我的插件代码：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import { getPosition, insertData } from './utils';

import TableIcon from './icons/table-icon.svg';
import { data } from './data-procedure';



export default class PluginProcedure extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add( 'procedurePlugin', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: 'Procédure prélèvements ',
                withText: false,
                tooltip: true,
                icon: TableIcon
            } );

            // Callback executed once the image is clicked.
            view.on( 'execute', () => {


                editor.model.change( writer => {

                    editor.setData(" <h1 style="color:red"> <h1>")
                    //not works


                } );
            } );

            return view;
        } );
    }

}

我Google它，我发现需要配置以允许内容

  allowedContent: true
extraAllowedContent: "* [*]",

它仍然无法工作，因为我不知道如何添加配置规则， 我从事自定义构建工作，请提供帮助！ 或者如果有榜样。

Answer 1

htmlSupport:  { allow: [
        {
            name: 'iframe',
            attributes: true,
            classes: true,
            styles: true
        }
    ]},