CKEditor5自定义构建如何配置允许所有内容 内联样式不生效

你查到的allowedContent、extraAllowedContent是CKEditor4的专属配置项，在CKEditor5中完全不生效。CKEditor5默认采用严格的内容过滤机制，所有未在Schema中注册的HTML元素、属性、类名、内联样式都会被自动过滤，必须通过官方提供的通用HTML支持插件配置允许规则。

步骤1：安装通用HTML支持插件 #

首先在项目中安装官方的HTML支持依赖：

npm install --save @ckeditor/ckeditor5-html-support

步骤2：修改编辑器配置文件（ckeditor.js） #

首先引入插件，注册到内置插件列表，再添加对应允许规则：

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
// 新增：引入通用HTML支持插件
import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport';

//.. 其他原有插件引入

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    Essentials,
    GeneralHtmlSupport, // 新增：注册插件
    UploadAdapter,
    Autoformat,
    Bold,
    //.. 其他原有插件
  PluginProcedure,
  InsertTable
];

// Editor configuration.
ClassicEditor.defaultConfig = {
    // 新增：HTML支持规则配置
    htmlSupport: {
        allow: [
            {
                // 正则匹配所有标签名
                name: /.*/,
                // 允许所有属性
                attributes: true,
                // 允许所有类名
                classes: true,
                // 允许所有内联样式
                styles: true
            }
        ]
    },
    // 原有配置保持不变即可
    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'
        ]
    },
    language: 'en'
};

如果不需要放开所有内容限制，可以配置精确的允许规则，比如只允许h1标签的color样式：

htmlSupport: {
    allow: [
        {
            name: 'h1',
            styles: ['color'],
            // 允许指定类名就加 classes: ['class-name1', 'class-name2'],
            // 允许指定属性就加 attributes: ['data-id', 'title']
        }
    ]
}

步骤3：修复自定义插件的代码问题 #

你现有插件代码存在两个错误：

• 插入的HTML字符串标签未闭合：<h1 style="color:red"> <h1>是两个未闭合的h1开标签，会被解析器直接丢弃
• editor.setData()是全量替换编辑器内容的方法，不需要包裹在editor.model.change()回调中；如果只是要在光标位置插入内容，不要用setData

修正后的插件代码示例 #

如果点击按钮需要替换编辑器全部内容：

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
            } );

            view.on( 'execute', () => {
                // 直接调用setData即可，不需要包裹model.change
                editor.setData(`<h1 style="color:red">插入的红色标题</h1>`);
            } );

            return view;
        } );
    }
}

如果点击按钮需要在当前光标位置插入内容，使用模型插入方法：

view.on( 'execute', () => {
    // 先把HTML字符串转成视图片段，再转成模型片段插入
    const viewFragment = editor.data.processor.toView( `<h1 style="color:red">插入的红色标题</h1>` );
    const modelFragment = editor.data.toModel( viewFragment );
    editor.model.insertContent( modelFragment );
} );

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