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

Question

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!

Answer 1

Use the button below to toggle the read-only mode. Some features, like exports or search, are still functional in the read-only mode. Others, like the replace function, are disabled.

Answer 2

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>

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.

Answer 3

I'll address the key points and potential solutions for the issue raised in the thread, drawing on knowledge from the provided information and CKEditor 5 documentation:

Understanding the Issue:

• Feature Availability: The enableReadOnlyMode() method is available for the DecoupledEditor, but its behavior might differ from the ClassicEditor.
• HTML Tags Visibility: The DecoupledEditor's default rendering might expose raw HTML tags in read-only mode, unlike the ClassicEditor's visual presentation.
• HTML Feature Rendering: Specific HTML features like font color and size might not be preserved accurately when transitioning from editing to read-only mode in the DecoupledEditor.

Potential Solutions:

1. Disable Editing Directly:
   • Instead of enableReadOnlyMode(), use editor.isReadOnly = true to directly prevent editing.
   1. Customize Rendering:
      • Employ the DecoupledEditor.render() method to control how content is displayed in read-only mode, potentially hiding HTML tags or applying custom styling.
      1. Consider Plugins:
         • Explore plugins like ReadOnlyMode or Highlight for enhanced read-only experiences with features like content highlighting.
         1. Investigate HTML Feature Rendering:
            • If specific HTML features aren't rendering correctly, delve into the DecoupledEditor's configuration and rendering process to identify and address potential issues.
            1. Consult Documentation and Community:
               • Refer to the CKEditor 5 documentation for detailed usage guidelines: https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-decoupled_decouplededitor-DecoupledEditor.html
                 • Seek assistance from the CKEditor 5 community forums for further troubleshooting and knowledge sharing.
                 Additional Considerations:
                 • Feature ID Consistency: Ensure the feature-id used in enableReadOnlyMode() matches an existing feature in your editor configuration.
                 • Error Handling: Inspect your browser console for any errors or warnings that might provide clues.
                 • Alternative Solutions: If customization proves challenging, consider alternative approaches like using a separate, simplified view for read-only content presentation.
                 I'm ready to assist with more specific guidance if you can provide further details about your editor configuration, desired read-only behavior, and any error messages encountered. Same issue in my client project Spotify Premium. I have solved to following these steps.