-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
No readonly property #609
Comments
Hi there! There is no option to make the editor read-only at the moment. |
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. |
any other workaround for read only? |
After render editor js, find all content editable elements and off it. And hide control elements by css class. |
@dimensi Seems like an approachable idea for now. Do you have an example or do you know how to find all content editable? |
|
+1 |
+1 |
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. |
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. |
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. |
+1 |
In react i create a component. 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; |
I can't agree more that read-only is the critical mvp feature. |
@Dagorik Thanks for sharing your work. I have used Your code it seems to be working fine but |
@UddeshJain no, the classes are what editor.js uses |
@Dagorik Do I need to import any file from anywhere to make Css work? |
any updates for read only property ? |
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. 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>
);
}
} |
Hello everyone! ...
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. |
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> |
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 |
Did you try to embed any link then making the editor read-only? |
Did you get your styling working? |
It worked. |
Finally something simple. 😂 |
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
<#609 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AF6XEINXOAPPPLX2KOA6UHLSLVC5FANCNFSM4GWR7YLA>
.
|
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 |
This feature is implemented in v2.19 |
it works, but what you do with the links ? |
Great jobs.
Vào Th 3, 20 thg 10, 2020 lúc 15:29 Mahmoud Abouchandi <
***@***.***> đã viết:
… Finally something simple. 😂
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#609 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AF6XEINXOAPPPLX2KOA6UHLSLVC5FANCNFSM4GWR7YLA>
.
|
No property to make editor readonly (or I didn't found it)
The text was updated successfully, but these errors were encountered: