Lovely Editor


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.

What is the LovelyEditor?

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.

Features

  • Provides a variety of pre-designed editors: eg. EditorQuill, CodeMirror, ToastUI
  • design and features are largely customisable: make it your own!
  • easy way to create and add your own custom editor or extend existing ones
  • use every EditorComponent (eg. EditorQuill) independently without need to look out you for the others

Examples

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.

How does it work?

LovelyEditor components

The LovelyEditor basically consists out of three main components:

  1. LovelyEditor
  2. EditorBlock
  3. Editors (eg. EditorQuill)

Structure of the LovelyEditor

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.

Editor State

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 . That means if you e.g. type in a new text into a the editorState will change. Your app can access the current editorState by subscribing to the onChange property of the . Through this any changes to an Editor (eg. EditorQuill) lead to an onChange event of the and lets you use the change for your own purposes (eg. validate changes or show "unsaved" messages).

Try it yourself!

If we got you interested in trying out our LovelyEditor then check out our Example-App or the GIT-repository and just follow the instructions to add it to your own project.

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

Lovely Systems