CkEditor5 disable content filtering (ReactJs) - 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>
)