CKEditor 5 asks to set <div> instead of <textarea>, but then asp-for does not work for @Model.Class.Value (always = null).

Question

Hi!

I am trying to create a text input field for a client based on CKEditor 5.

This is not a classic CKEditor. The classic one just needs to specify <textarea> and everything works:

<textarea id="editor_middle_en" asp-for="ProjectProduct.MiddleDescription_en">@Html.Raw(Model.ProjectProduct.MiddleDescription_en)</textarea>

But the custom CKEditor requires me to put not <textarea>, <div>:
<div id="editor_middle_en" asp-for="ProjectProduct.MiddleDescription_en">@Html.Raw(Model.ProjectProduct.MiddleDescription_en)</div>

asp-for with <div> always sends me null in @Model.Project Product.MiddleDescription_en in the controller method, which I call using submit:

<input id="submit" class="btn btn-info" hidden type="submit" value="submit"/>

How do I transfer the actual text from CKEditor 5 <div>? I tried doing hidden input - it works, but it's a separate block and the text doesn't change there. I also tried to pick up the actual text from <div> using oninput=Method(this);", but in the console I see an error like domconverter-unsafe-attribute-detected.

Thanks!

[HttpPost]
public IActionResult Method(Model? model) {
	model.ProjectProduct.MiddleDescription_en = null; !!!
}

Answer 1

I do not create Classic Editor, I use Decoupled Editor. I did as you advised.

This is why the community asks for the source code. There are several CKEditor 5 default builds each use the same API. Since the decoupled-document build uses the Decoupled Editor, I'll use the decoupled-document build in the example.

https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#document-editor

I have this error in the console:

The error message indicates "editor" is not initialized or pointing to the right place. I assume there is a bug in your code which we cannot see.

@{
    ViewData["Title"] = "Index";
}
<h1>Document editor</h1>

<div id="toolbar-container"></div>

<div id="editor">
    <p>This is the initial editor content.</p>
</div>
<div>
    <button id="submitButton" type="button">Submit</button>
</div>

@section scripts {
    <script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/decoupled-document/ckeditor.js"></script>


    <script>
        let decoupledEditor;

        DecoupledEditor
            .create(document.querySelector('#editor'))
            .then(editor => {
                const toolbarContainer = document.querySelector('#toolbar-container');

                toolbarContainer.appendChild(editor.ui.view.toolbar.element);
                decoupledEditor = editor;
                    })
            .catch(error => {
                console.error(error);
            });

        document.querySelector('#submitButton').addEventListener('click', () => {
            const editorData = decoupledEditor.getData();
            console.log(editorData);
        });

    </script>
}

Answer 2

How do I transfer the actual text from CKEditor 5 <div>?

According to the CkEditor 5 documentation, JavaScript is used to fetch the editor contents.

https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/getting-and-setting-data.html

I used the fetch API to submit the editor contents to the the controller.

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Model

    public class MyModel
    {
        public string EditorData { get; set; }
    }

View

@{
    ViewData["Title"] = "Index";
}

<div class="text-center">
    <h1>Welcome to CKEditor 5 in .NET</h1>
    <div id="editor"></div>
    <div>
        <button id="submit" type="button">Submit</button>
    </div>
</div>


@section scripts { 
    <script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/classic/ckeditor.js"></script>
    <script>
        let editor;

        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(newEditor => {
                editor = newEditor;
            })
            .catch(error => {
                console.error(error);
            });

        document.querySelector('#submit').addEventListener('click', () => {
            const editorData = editor.getData();

            console.log(editorData);

            const data = { EditorData: editorData };
            postJSON(data);
        });


        // Example POST method implementation:
        async function postJSON(data) {
            try {
                const response = await fetch("/CkEditor", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(data),
                });
                const result = await response.json();
                console.log("Success:", result);
            } catch (error) {
                console.error("Error:", error);
            }
        }
    </script>
}

Controller

    public class CkEditorController : Controller
    {
        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Index([FromBody] MyModel data)
        {
            return Ok(data);
        }
    }

Answer 3

browsers do not post div values. you should use javascript to copy the div html to a hidden field before submitting.

also razor <div>'s don't support asp-for, you should change the div to:

<div id="editor_middle_en">@Html.Raw(Model.ProjectProduct.MiddleDescription_en)</div>

and be sure MiddleDescription_en is valid html.