tinymce / tinymce

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
https://www.tiny.cloud
Other
15.08k stars 2.24k forks source link

The contenteditable property is still set to true when read-only mode is enabled (since 7.4) #9954

Open AdrienClairembault opened 3 weeks ago

AdrienClairembault commented 3 weeks ago

📝 Provide detailed reproduction steps (if any)

  1. Go to https://fiddle.tiny.cloud/
  2. Paste this configuration or just add the readonly: true parameter
    
    <script type="text/javascript">
    tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
        "help", "image", "insertdatetime", "link", "lists", "media",
        "preview", "searchreplace", "table", "visualblocks",
    ],
    toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    readonly: true
    });
    </script>

3. Execute in any 7.4.x version.

### ✔️ Expected result

The `contenteditable` property should be set to `false`.

See with version 7.3:
![Image](https://github.com/user-attachments/assets/0c0b75ad-ed7e-4451-b888-09664c8530e0)

### ❌ Actual result

The `contenteditable` property is set to `true`.

![Image](https://github.com/user-attachments/assets/4e816c02-277d-4386-9129-959ca3ab63ef)
TheSpyder commented 2 weeks ago

We made a few changes in 7.4.0 based on requests for content to be more interactive in readonly mode. It should not be possible to edit the content in readonly mode even though contenteditable has been set to true. If you find one, please let us know.

We have already had feedback that selectable content is not always desired, we are considering a new "disabled" approach to bring back what we previously called "readonly".