Editor.js: No readonly property

[YogurtTheHorse]

No property to make editor readonly (or I didn't found it)

[gohabereg]

Hi there!

There is no option to make the editor read-only at the moment.
We are planning a release of the version 2 in the next couple of weeks (now the editor is on beta-stage). This feature will not be included to the release, but we would add it to our backlog for the next version.

[tomchify]

Hi there, just putting in one more vote for read-only. Editor.js seems amazing and thank you for all of the great work. Without read-only, however, how can editor.js be used to publish anything? What are the use cases if there is no read-only support? For my use cases (an education publishing platform), read-only is a critical mvp feature. Content is generally created by a few to be consumed by many.

[AsathalMannan]

any other workaround for read only?

[dimensi]

After render editor js, find all content editable elements and off it. And hide control elements by css class.

[EcaterinaM]

@dimensi Seems like an approachable idea for now. Do you have an example or do you know how to find all content editable?

[dimensi]

@dimensi Seems like an approachable idea for now. Do you have an example or do you know how to find all content editable?

document.querySelectorAll('[contenteditable=true]')

[ohsik]

+1

[Vik-Th0r]

+1
can we have a proper property in the constructor please?

[aximobile]

Hi there, I totally agree with @tomchify.

We would like to use the editor in our next product but really need the read-only mode so users can only read the text.

[siddug]

Hi there.

We are planning to editorjs as well. Rendering content using editorjs and hiding the toolkit wont work for us since it effects SEO.

[elhardoum]

Hi there.

We are planning to editorjs as well. Rendering content using editorjs and hiding the toolkit wont work for us since it effects SEO.

I haven't tried this yet - you may clone the editor element to a div, remove the tools and content-editable attributes from there, and then save the HTML parsed by the editor to your database.

[sumitvekariya]

https://medium.com/@sumitvekariya7/editor-js-read-only-mode-in-angular-4f73192ed860

I have created readOnly view mode for angular using switchcase statement based on block type and I have used css classes given in editor.js iteslf, so It creates almost same user interface.

[Dagorik]

+1

[Dagorik]

In react i create a component.
It has the main elements.

import React from 'react';
import parser from 'html-react-parser';

function ReadOnly({ data }) {
  const renderBlock = ({type, data}) => {
    let content = ""
    switch (type) {
      case "header":
        const element =  React.createElement(
          `h${data.level}`,
          {
            className: 'ce-header',
          },
          data.text
        )  
        content =    (<div style={{height: "fit-content"}}>
            {element}
          </div>)
      break;
      case "list":
        content = (<ul className={`"cdx-block" "cdx-list" "cdx-list--${data.style}"`}>
          {data.items.map(item =>  <li class="cdx-list__item">{item}</li>)}
        </ul>)
      break;
      case "embed":
          content = (<div className="cdx-block embed-tool">
          <iframe className="embed-tool__content" style={{width: "fit-100%"}} height="320" frameborder="0" width="580"
            allowfullscreen src={data.embed}></iframe>
          <div style={{'text-align': "center", 'margin-top': "5px"}}>{data.caption}</div>
          </div> )
      break;
      case "code":
        content = (<div class="cdx-block ce-code">
            <span style={{'text-align': "right", 'margin-bottom': "5px"}}>{data.language}</span>
            <pre className="ce-code__textarea cdx-input prettyprint"><code className="lang-js">{data.code+""}</code></pre>
          </div>)
      break;
      case "image":
          content = (
            <div className="cdx-block image-tool image-tool--filled">
              <div className="image-tool__image">
                <img className="image-tool__image-picture" src={data.file.url}></img>
                <span style={{'text-align': "right", 'margin-bottom': "5px"}}>{data.caption}</span>
              </div>
            </div>
          )
      break;
      default:
        content = (<div className="ce-paragraph cdx-block"> {parser(`${data.text}`)} </div>)
        break;
    }
    return (<div className="ce-block">
    <div className="ce-block__content">
      {content}
    </div>
  </div>)
  }

  return (
    data.blocks.map(block => renderBlock(block))
  );
}

export default ReadOnly;

[ForestWang6616]

I can't agree more that read-only is the critical mvp feature.

[UddeshJain]

@Dagorik Thanks for sharing your work. I have used Your code it seems to be working fine but styling not works for me. Did you write CSS in another file or anything else?

[Dagorik]

@UddeshJain no, the classes are what editor.js uses

[UddeshJain]

@Dagorik Do I need to import any file from anywhere to make Css work?

[KareemDa]

any updates for read only property ?

[khaydarov]

@KareemDa Hi. It is included in the next 2.18 release. You can follow the PR

[Mahmoud2406]

You could make your own property with css. The easiest way is to select all elements with '.ce-toolbar' classes and give them display:none style.
If you are using React with editor.js, then simply paste this in the 'onReady' property. in order to do so, you must make your own onReady method and pass it as a prop to the Editorjs component.

class EditorPages extends React.Component {
onReady = () => { 
        let tool = document.querySelectorAll(".ce-toolbar");
        for (let i = 0; i < tool.length; i++) {
            tool[i].style.display = "none"
        }
    }

 render() {
return(
   <EditorJs
               autofocus={true}
                data={this.state.data}
                onReady={this.onReady}
                instanceRef={instance => this.editorInstance = instance}
                tools={EDITOR_JS_TOOLS}>
            </EditorJs>
);
}

}

[maffinca69]

Hello everyone!
While we are waiting for the upcoming update (maybe it has already been released), I wrote a little code that "enable" readOnly mode

...
onReady() {
    let editable_elements = document.querySelectorAll("[contenteditable=true]");
    editable_elements.forEach(el => el.removeAttribute("contenteditable"))

    let icon_settings = document.querySelectorAll('.ce-toolbar__settings-btn');
    icon_settings.forEach(el => el.remove())
 },
...

I use remove to prevent users from editing so easily.
We are waiting for readOnly mode support in the next update!

[thangdjw]

i found this way :

var disableEdit = () => {
            let blockElements = document.getElementById("description"); // id of editor element
            blockElements.style.pointerEvents = "none";
        };

var editor = <EditorJs
            holder="description"
            minHeight={40}
            onReady={disableEdit}
            data={initEditorContent()}
            tools={getEditorToolConfig()} >
            <div id="description" className="profile-item-view" />
        </EditorJs>

[tronytran]

Dear @khaydarov, v2.18.0 was released, is this featured included as planned? I'm not seeing it in the API, not sure if I'm missing something.

[umutbozdag]

Dear @khaydarov, v2.18.0 was released, is this featured included as planned? I'm not seeing it in the API, not sure if I'm missing something.

They said that the read-only feature is gonna be released with the v2.19

[adshin21]

i found this way :

var disableEdit = () => {
            let blockElements = document.getElementById("description"); // id of editor element
            blockElements.style.pointerEvents = "none";
        };

var editor = <EditorJs
            holder="description"
            minHeight={40}
            onReady={disableEdit}
            data={initEditorContent()}
            tools={getEditorToolConfig()} >
            <div id="description" className="profile-item-view" />
        </EditorJs>

Did you try to embed any link then making the editor read-only?
For example, just embed a youtube video and you'll not able to play this.

[adshin21]

@Dagorik Do I need to import any file from anywhere to make Css work?

Did you get your styling working?

[parkkiung123]

It worked.
<div id="editorjs" style="pointer-events: none;"></div>

[Mahmoud2406]

Finally something simple. 😂

[thangdjw]

Good jobs. Bro :D

Vào Th 3, 20 thg 10, 2020 lúc 15:29 Mahmoud Abouchandi <
[email protected]> đã viết:

Finally something simple. 😂

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/codex-team/editor.js/issues/609#issuecomment-712685739,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AF6XEINXOAPPPLX2KOA6UHLSLVC5FANCNFSM4GWR7YLA
.

[antoine1003]

For the ones who are still looking for. This feature has been added and some doc is available here : https://editorjs.io/configuration#read-only-mode

[khaydarov]

This feature is implemented in v2.19