Here is a demo page.
If I produce WordPress or CMS and provide it to my customer,
I find the following issues with the WYSIWYG editor:.
- It is difficult to use unless you get used to it.
- Even if you get used to it, there is a case that the markup may collapse.
- Difficult or cumbersome to limit format of markup output
As an alternative to the WYSIWYG editor, we have developed an editor that meets the following requirements:.
- Easy to use, easy to use even if you are not used to it
- Minimize markup editing
- Easily limit markup
You can find the source on Github for more information.
- To edit any combination of predetermined block elements and output a single markup as a whole.
- Exporting or importing tags from hidden elements (Assumes POST on management screen)
To improve usability, you can't edit HTML markup directly or paste styled text directly from Word.
The types of block elements that can be used are:.
- Paragraph (Text + Image)
- Columns (Nest non-column elements)
- HTML (Enter any HTML markup)
The markup output is somewhat specific for each block element.
For example, for a paragraph:.
<div class="paragraph-wrap align-left"> <div class="text"> "<a href="https://github.com/takitakit/block-editor-vue" target="_blank">block-editor-vue</a>" is a block editor that allows you to stack any combination of block elements, such as paragraphs, headings, lists, and so on.<br>If you are using the CMS management screen, you can use this editor as a means of editing the body HTML of an article. </div> </div>
The class name (paragraph-wrap) can be changed as an option so that it can be used in various cases.
Limit the types of block elements available. Demo
Name a preset with specific block elements, class names, and so on. Demo
Applying Text Styles Within Block Elements. Demo
If you read this article and have any comments or requests, please send me your comments.