We just released our LovelyEditor as an Open Source project.
The editor was created as part of the Google DNI project “Amtliche Nachrichten” (AmNa) with az Medien and Edenspiekermann. We had the need for a simple editor where the user is able to organise his content in blocks. Some documents start with predefined blocks, other with a free rich text only. The user is able to add other predefined or free text blocks or media like images or arange the different blocks.
LovelyEditor is no re-invention of yet another WYSIWYG editor. It is a React component to provide a variety of existing editors to be combined for creating documents that are structured in blocks. The different blocks might be existing editors like Quill, ToastUI or CodeMirror, they might be an image or file block or a custom content block that is required by your individual application.
It gives you the opportunity to create your own editor and add it to the LovelyEditor-component. As a result the edited content will come in the shape of HTML markup to be added to your page. Each editor will create an isolated HTML markup of its part.
This makes it very easy for you to include a variety of different Editors into your App and organise them and their returned value exactly the way you need it. Also including a new Editor that is not supported yet can be accomplished within just a few easy steps.
The Example-App shows what our LovelyEditor can do. The app consists of 2 main parts, a toolbar and our LovelyEditor. The toolbar adds additional (pre-defined) Editors to our LovelyEditor. Each Editor block is extended by a Delete button, which removes an editor block from our LovelyEditor. Drag & Drop was added to illustrate that our LovelyEditor plays nice with other libraries.
The following link will provide you with certain examples on how the component may be used: https://lovely-editor.netlify.com. By selecting one of the options within "App Example" you will see a variety of possibilities on what you are able to use the component for. For example within "Menu and Quill Block Editor" there is an example-menu included to quickly add different editor-types (eg. Richtext, CodeMirror, etc.) to the application. It is also possible to use the same editor-type several times.
The LovelyEditor basically consists out of three main components:
The LovelyEditor rendered components-tree looks like this:
<LovelyEditor> <EditorBlock> // a EditorComponent, eg. <EditorQuill /> </EditorBlock> </LovelyEditor>
The main entry point in your app is the LovelyEditor. Its properties have to be specified and all necessary EditorBlock and EditorComponents are rendered automatically, based on the editorState and blocksConfig.
To tell the Editor it's current state we need to specify the editorState. It is responsible for telling the component which Editor gets what kind of data (eg. current content for the richtext editor).
The function of the editorState is, as the name says, to represent the current state of the
We want to give our special thanks to az Medien, especially Javier Vazquez who supported us in setting the project under an open source license.
Written by Stefan Theissl
Posted on August 17, 2018