CkEditor5 disable content filtering (ReactJs)

Question

In CKEDITOR 4.0 it was very simple, disabling content filtering

config.allowedContent = true

I have been going throught the docs again and again for almost a week. It was clearly mentioned in the docs that CKEditor 5 implements a custom data model. This means that every piece of content that is loaded into the editor needs to be converted to that model and then rendered back to the view.. I am still unsure how to implement a custom data model which supports all styles and tags.

I am using decoupled editor with react js like below

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

Any help or a peice of code for a new plugin which will allow all html tags and styles would be really greatfull

Answer 1

Yes CKEditor5 is not straight forward. Assuming you are looking for options to explicitly configure editor. I have done in this way,

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