I developed a block editor made by Vue.js

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.

Comments

[Rohit Trivedi]

Excellent work

Can this give output as json ?

How extensible it is ? How easy it would be to integrate other libraries like codemirror, other rich text editor(editorjs.io), Markdown editor etc ?

[takitakit]

Thank you for your reply.

This library cannot output JSON directly, but I've made it possible to get structure data.
I have a demo here, so please check it out.
At the time of editing, if you check the console log, you will see the structure data output.

codepen.io/takitakit/pen/LKZgRY

[Rohit Trivedi]

Anything on my other query about it being extensible ?

Would it be easier to add existing markdown editor library or codemirror : codemirror.net/.

Basically I am thinking of using it is one of my note taking app, where I want to have some meta data on each block

A block can be -> canvas to draw, Math formula, Markdown, todolist, codesnippet, embeddable widget ... infinite possibilities.

On top of this I would like have some metadata at each block level e.g. tags, space repetition reminder, associated image , public/private flag.

I haven't worked with Vue, I will look into that and would like to contribute to this project.

[takitakit]

This tool is an alternative to the WYSIWYG editor, and I created to make building HTML markup easier.
From the comments, it seems that your intended use is not limited to HTML.
The current functionality of this tool may not meet your needs, but internally, it holds structured data not HTML markup.
If you improve it, you may be able to create the desired function.

[Nairam]

Hi!

Congrats to your block-style-editor!

Do you think it's poosible to achieve the same thing with Blazor instead of vue?
Thanks!