editor.disableReadOnlyMode( 'feature-id' ); is not working in DecoupledEditor

Volk Volk 551

Hi!

The question is simple.

This works:
<script src="~/js/ckeditor5-build-classic/ckeditor.js"></script>
<textarea id="editor_middle">@Model.Description</textarea>

ClassicEditor
			.create( document.querySelector( '#editor_middle' ), {
			} )
			.then( editor => {				
				editor.enableReadOnlyMode( 'my-feature-id' );
			} )
			.catch( err => {
				console.error( err.stack );
			} );

This does not work:
<script src="https://cdn.ckeditor.com/ckeditor5/38.1.0/decoupled-document/ckeditor.js"></script>
<div id="editor_middle">@Model.Description</div>

DecoupledEditor
			.create( document.querySelector( '#editor_middle' ), {
			} )
			.then( editor => {				
				editor.enableReadOnlyMode('feature-id');
			} )
			.catch( err => {
				console.error( err.stack );
			} );

I see only html-tags.

No errors in the console!

The documentation says this:

https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-decoupled_decouplededitor-DecoupledEditor.html#member-isReadOnly

Why doesn't it work?

P.S. I could use Classic Editor, but the text is created in Decoupled Editor and for some reason some html-features does not work when output (readonly) - font color, font size. Therefore, I am trying to first output the text in the same editor in which it was created, but in the readonly version.

Thanks!

AgaveJoe 1,505

Why doesn't it work?

Have you tried debugging with browser's dev tools? If you need community debugging support than post code that reproduces the problem.

If @Model.Description contains html tags then most likely the issue is the tags are html encoded. Open Dev Tools and review the content or use the Visual Studio debugger to view the variable.

Try...

@Html.Raw(@Model.Description);

Capture

@{
    ViewData["Title"] = "Index";
    string html = "<p>This is the initial editor content.</p>";
}
<h1>Document editor</h1>

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

<div id="editor">
    @Html.Raw(html)
    @html
</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);
                //editor.enableReadOnlyMode('feature-id');
                decoupledEditor = editor;
                
                    })
            .catch(error => {
                console.error(error);
            });

        document.querySelector('#submitButton').addEventListener('click', () => {
            const editorData = decoupledEditor.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>
}

Volk Volk 551 Reputation points

2023-08-11T20:20:59.3+00:00

I do everything as in your example - on a separate page. Everything works as it should! And on my page, where there are many different elements, it does not work. ))) I'll try to understand why.

Volk Volk 551

I localized the problem, but it's kind of a horror. )))

How is this even understood?

let editor_middle;

      .create(document.querySelector('editor_middle'))

			.then(editor => {
				//const toolbarContainer = document.querySelector('#toolbar-container');
				//toolbarContainer.appendChild(editor.ui.view.toolbar.element);
				editor.enableReadOnlyMode('feature-id');
				editor_middle = editor;
			})

			.catch(error => {
				console.error(error);
			});

	</script>

Everything works if I insert the data manually into the <div> (what I have in the database).

<div id="editor_middle" style="background: White;">
<p>&nbsp;</p><p><span class="text-big" style="color:hsl(0,100%,38%);"><strong>Handheld emperor</strong></span></p><p>&nbsp;</p><p>Handheld emperor</p><p>Nintendo, a Japanese electronics company, started as a <a href="https://en.wikipedia.org/wiki/Hanafuda"><i>hanafuda</i> cards</a> manufacturer in 1889. In the mid-1970s, they entered the early video games market and became famous for their home video and handheld game consoles. Nintendo introduced consoles like <strong>NES</strong>, <strong>SNES</strong>, and <strong>Wii</strong>. But the most revolutionary was for sure the <strong>Game Boy</strong>.</p><p>A countdown of Nintendo handhelds</p><p>
</div>

AAAAAAAAAA

If I output the same string from the DB from the string property of the model, then I see html.

<div id="editor_middle" style="background: White;">
    @Model.ProjectProduct.MiddleDescription_en
</div>

BBBBBBBBBBBBBBBB

What the hell is this?And how to fix it?

I need to put a line with html from the database in the div.

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

3 answers

Volk Volk 551 Reputation points

2023-08-11T21:18:44.6466667+00:00
I localized the problem, but it's kind of a horror. )))

How is this even understood?

let editor_middle; .create(document.querySelector('editor_middle')) .then(editor => { //const toolbarContainer = document.querySelector('#toolbar-container'); //toolbarContainer.appendChild(editor.ui.view.toolbar.element); editor.enableReadOnlyMode('feature-id'); editor_middle = editor; }) .catch(error => { console.error(error); }); </script>

Everything works if I insert the data manually into the <div> (what I have in the database).

<div id="editor_middle" style="background: White;"> <p> </p><p><span class="text-big" style="color:hsl(0,100%,38%);"><strong>Handheld emperor</strong></span></p><p> </p><p>Handheld emperor</p><p>Nintendo, a Japanese electronics company, started as a <a href="https://en.wikipedia.org/wiki/Hanafuda"><i>hanafuda</i> cards</a> manufacturer in 1889. In the mid-1970s, they entered the early video games market and became famous for their home video and handheld game consoles. Nintendo introduced consoles like <strong>NES</strong>, <strong>SNES</strong>, and <strong>Wii</strong>. But the most revolutionary was for sure the <strong>Game Boy</strong>.</p><p>A countdown of Nintendo handhelds</p><p> </div>

If I output the same string from the DB from the string property of the model, then I see html.

<div id="editor_middle" style="background: White;"> @Model.ProjectProduct.MiddleDescription_en </div>

What the hell is this?And how to fix it?

I need to put a line with html from the database in the div.
Please sign in to rate this answer.
AgaveJoe 1,505 Reputation points

2023-08-11T22:14:22.2766667+00:00

The razor engine automatically HTML encodes content to protect the application from rendering malicious scripts. The @Html.Raw() method preserves the HTML tags. Use @Html.Raw() when raw HTML string content is passed to the view and, very important, the content is fully trusted.

@Html.Raw(Model.ProjectProduct.MiddleDescription_en)

It is common to store HTML encoded data in a database. I don't know if this applies to your situation as I cannot see the all the relevant code. But, use HttpUtility.HtmlDecode() if the data in the database is stored as HTML encoded.

The sample below has three examples of encoding and decoding.

@{ ViewData["Title"] = "Index"; string html = "<p>This is the initial editor content.</p>"; string htmlEncoded = "<p>This is the an HTML encoded string.</p>"; } <h1>Document editor</h1> <div id="toolbar-container"></div> <div id="editor"> @Html.Raw(html) @html @Html.Raw(System.Web.HttpUtility.HtmlDecode(htmlEncoded)) </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); editor.enableReadOnlyMode('feature-id'); decoupledEditor = editor; }) .catch(error => { console.error(error); }); document.querySelector('#submitButton').addEventListener('click', () => { const editorData = decoupledEditor.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> }

The browser has a "View page source" view (right click anywhere) which shows HTML encoded content. If you see a string like...

<p>

...then the HTML is encoded.

Again, if community debugging support is required then the community needs a code sample that reproduces the unwanted behavior. Otherwise we can only guess.

Volk Volk 551 Reputation points

2023-08-12T05:00:04.3833333+00:00

Thank you!
You've been very helpful!
Html.Raw() helped.

But...

Why is Html.Raw() needed only in the case of DecoupledEditor, because in ClassicEditor everything works without it? Why such ambiguity? That's what works everywhere and always: <textarea id="editor_middle">@Model.ProjectProduct</textarea>. Or is it also desirable for me to wrap such data in Html.Raw() everywhere in the case of ClassicEditor?

Why does changing the font color in the DecoupledEditor editor not work? What could be this error? <p> </p><p><span class="text-big" style="color:hsl(0,100%,38%);"><strong>Handheld emperor</strong> The color does not change during editing and during output.

AgaveJoe 1,505 Reputation points

2023-08-12T10:15:56.3333333+00:00

Why is Html.Raw() needed only in the case of DecoupledEditor, because in ClassicEditor everything works without it? Why such ambiguity? Why does changing the font color in the DecoupledEditor editor not work? What could be this error?

The Razor Engine is consistent in the way it works. If your testing is accurate then the pervious version of CkEditor must decoded the HTML.

I'm unable to reproduce the font color issue. If you want community debugging support then we'll need a code sample that reproduces this issue.

n my opinion, CkEditor support or reading the source code is a better way to get help with the CkEditor.

https://stackoverflow.com/tags/ckeditor

Bruce (SqlWork.com) 68,406 Reputation points

2023-08-13T15:39:05.1+00:00

When you use a textarea, to set the value, the html text must be encoded, the razor default. When you set the html content of a div, it must not be encoded.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more
Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Share via

editor.disableReadOnlyMode( 'feature-id' ); is not working in DecoupledEditor

3 answers

Your answer