CkEditor5 禁用内容过滤 (ReactJs)答案

【问题标题】：CkEditor5 disable content filtering (ReactJs)CkEditor5 禁用内容过滤 (ReactJs)
【发布时间】：2021-02-01 04:18:33
【问题描述】：

在 CKEDITOR 4.0 中非常简单，禁用内容过滤

config.allowedContent = true

近一个星期以来，我一次又一次地阅读这些文档。文档中明确提到 CKEditor 5 实现了自定义数据模型。这意味着加载到编辑器中的每一条内容都需要转换为该模型，然后再渲染回视图。。我仍然不确定如何实现支持所有样式和标签的自定义数据模型。

我正在使用解耦编辑器和下面的 react js

import React from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import DecoupledcEditor from "@ckeditor/ckeditor5-build-decoupled-document";

export default function App() {
  return (
    <div className="App">
      <CKEditor
        editor={DecoupledcEditor}
        data={this.state.data}
        onInit={(editor) => {
          console.log("Editor is ready to use!");
          console.log(editor.ui.getEditableElement());
          editor.ui
            .getEditableElement()
            .parentElement.append(editor.ui.view.toolbar.element);
        }}
        onChange={this.handleChange}
        config={{
          allowedContent:true
        }}
      />
    </div>
  );
}

对于允许所有 html 标签和样式的新插件的任何帮助或代码片段将非常棒

【问题讨论】：

似乎没有允许所有样式/标签的构建，但请尝试使用这个github.com/TMH-SE/ckeditor5-build-full，如果您不断过滤掉内容，则必须编写自己的构建允许该内容，由于学习曲线长，我认为这很困难：/您可能应该考虑回到 CKEDITOR 4

标签： reactjs ckeditor ckeditor5

【解决方案1】：

是的，CKEditor5 并不简单。假设您正在寻找显式配置编辑器的选项。我是这样做的，

return (
<CKEditor
                editor={DecoupledEditor}
                data=''
                onInit={(editor) => {  editor.ui.getEditableElement().parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
                   
                }}
                onChange={(event, editor) => {
                
                }}
                config={{
                    placeholder: helperText ? helperText : "Add content here...",
                    fontColor: {
                        colors: [
                            {
                                color: "rgb(0, 0, 0)",
                                label: "Black",
                            },
                            {
                                color: "rgb(77, 77, 77)",
                                label: "Dim grey",
                            },
                            {
                                color: "rgb(153, 153, 153)",
                                label: "Grey",
                            },
                            {
                                color: "rgb(230, 230, 230)",
                                label: "Light grey",
                            },
                            {
                                color: "rgb(255, 255, 255)",
                                label: "White",
                                hasBorder: true,
                            },
                            {
                                color: "rgb(255, 0, 0)",
                                label: "Red",
                            },
                            {
                                color: "rgb(255, 102, 0)",
                                label: "Orange",
                            },
                            {
                                color: "rgb(255, 255, 0)",
                                label: "Yellow",
                            },
                            {
                                color: "rgb(102, 255, 51)",
                                label: "Light green",
                            },
                            {
                                color: "rgb(0, 153, 0)",
                                label: "Green",
                            },
                            {
                                color: "rgb(0, 0, 255)",
                                label: "Blue",
                            },
                        ],
                    },
                    fontBackgroundColor: {
                        colors: [
                            {
                                color: "rgb(0, 0, 0)",
                                label: "Black",
                            },
                            {
                                color: "rgb(77, 77, 77)",
                                label: "Dim grey",
                            },
                            {
                                color: "rgb(153, 153, 153)",
                                label: "Grey",
                            },
                            {
                                color: "rgb(230, 230, 230)",
                                label: "Light grey",
                            },
                            {
                                color: "rgb(255, 255, 255)",
                                label: "White",
                                hasBorder: true,
                            },
                            {
                                color: "rgb(255, 0, 0)",
                                label: "Red",
                            },
                            {
                                color: "rgb(255, 102, 0)",
                                label: "Orange",
                            },
                            {
                                color: "rgb(255, 255, 0)",
                                label: "Yellow",
                            },
                            {
                                color: "rgb(102, 255, 51)",
                                label: "Light green",
                            },
                            {
                                color: "rgb(0, 153, 0)",
                                label: "Green",
                            },
                            {
                                color: "rgb(0, 0, 255)",
                                label: "Blue",
                            },
                        ],
                    },
                    toolbar: [
                        "heading",
                        "|",
                        "bold",
                        "italic",
                        "blockQuote",
                        "underline",
                        "link",
                        "fontSize",
                        "fontColor",
                        "fontBackgroundColor",
                        "numberedList",
                        "bulletedList",
                        "imageUpload",
                        "imageStyle:full",
                        "imageStyle:side",
                        "mediaEmbed",
                        "|",
                        "undo",
                        "redo",
                    ],
                }}
            >
</CKEditor>
)

【讨论】：

我需要一种方法来禁用 ckeditor5 中的内容过滤。我知道自定义工具栏。