Editor.js
Block-style editor with a universal JSON output. Modern look. Customizable. Out of the box.
With Editor.js component for Toddle, you have 2 options to save data: on button click or Auto Save with an adjustable time interval.
Every tool in the editor is optional, and you can select the ones you need for your project.
Demo
Component
editorjs
Important: The EditorJS component has no styling for background color and text color. Therefore, ensure that the parent element has the necessary styling. It works best on light backgrounds and dark text colors. The width of the editor is 100%, so make sure to add a decent amount of left and right padding to the parent element.
Attributes
content Value type: JSON. Prefil the editor with content. autofocus Boolean field. True if you want to set a Caret to the Editor after initialization. button-id Enter only if you want to use the Button Save feature. It accepts the ID of any button on the page. read-only Boolean field. True means that users won't have the ability to change the document content. placeholder Placeholder text that is shown when there is no content in the editor. save-interval By default, when content is changed, it triggers the auto save feature after 2 second. You can enter the value in milliseconds if you want to adjust that. For example, enter 3000 for a 3-second interval. "tool_name"-tool
Boolean field. There are multiple attributes with "-tool" at the end. By default, the editor comes with the "Text" tool only. If any of the tool attributes are set to True, it will be added with the default "Text" tool in the dropdown.
Current list of tools: Text, Heading, List, Checklist, Toggle, Quote, Table, Delimiter, Alert, Raw HTML, Code, Inline Code and Inline Marker.
The tools that are not selected will not run external scripts that are required to run the tool🎉🎉padding-bottom Adjust the editor bottom spacing. Default value is "100px". Events
Saved Data Emitted every time there is save trigged. By button click or Auto Save. The output is JSON.