I developed a block editor made by Vue.js

takitakit — Thu, 16 May 2019 03:54:00 +0000

Here is a demo page.

Background

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.

What This Editor Can Do

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.

Usage

The types of block elements that can be used are:.

Paragraph (Text + Image)
Heading
List.
Table
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.

Other Features

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.

DEV Community: takitakit

I developed a block editor made by Vue.js

Background

What This Editor Can Do

Usage

Other Features