CkEditor5 禁用內容過濾 (ReactJs)

Question

在 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 標簽和樣式，這將非常有用

Answer 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>
)