The Perfect Content Editor. What does it look like? The Final Version

The Perfect Content Editor. What does it look like? The Beginning

https://bervski.xyz/blog/article/the-perfect-content-editor-what-does-it-look-like-the-beginning-15

In my first post dedicated to The Perfect Content Editor I revealed the backstage about my old content editor. The main goal of the Editor is to create and publish projects you can see on this page.

So those version were boring and not relevant. Moreover I did restyling for my main website and those old version became totally unsuitable. And than I developed a whole new perfect content editor. How it was?

The Plan

I had an interesting project - Magazino. You can see it here. That project contains so much interesting and bright visual content that I understood - I need a completely new portfolio project page. I just wasn't ready for this type of project structures when I was developing the old style project page.

Sooo I decided that I will develop a page builder. Sounds gorgeous, right? Definitely!

I started from the end. For being possible to develop a proper page builder I need to understand the output format that I will render in the final user page.

I had experience with EditorJS and I really fond of it! So I like JSON-structure as an output format. It's clean, it's convinient and it's predictable. That I chose the following format:

{
    "block":"section_text_t1",
    "options":{
         "text_align":"center",
         "grid_align":"center",
         "padding":"6rem",
         "line_height":"1.2",
         "header_size":"4rem",
         "header_margin":"0 0 3rem 0"
     },
     "content":{
         "header":"The Goal",
         "sub_header":"",
         "text":"To develop a project!"
     }
},
...

This is one block. What do I do on the user's page in the browser? There a couple of options. I prefer to use switch-operator. If I get block "section_text_t1" than I render something like

<div>
    <h2>{ $block->content->header }</h2>
    <p>{ $block->content->text }</p>
</div>

It's a Laravel Blade syntax. But I think you got the idea

So that was brilliant and I developed Magazino-project page for this format. I did it manually. Just in my database editor. Like that:

HeidiSQL fragment
HeidiSQL fragment

Back to that moment I thougth "I'll create a page builder a lil bit later...". So than was a next project. And I did it manually. Again. Well... people are lazy. Me too. Than was one more project. And the same thing about designing those page.

On the Grandex.io project I desided it's enough! The time has come. I need to develop some page builder. And I did it. Brand new Perfect Project Publishing Builder. How does it look like?

New Perfect Content Editor
New Perfect Content Editor

So what's in there?

Every project has a hero image. Because it's nice, it's bright, people love it, it's impressing potencial customers and much more. So this block with chess background you can see at the top of the page is cropper actually. You click, you choose an image, you position it and you go further

That how it looks like in the action:

And than I have the magic button "+". What does this button do? It propose you to add a new block to the page like that

What's in the dropdown

The very first version contained lots more tools and precomiled assets. There were lots of lists, some decorated paragraphs and more. But at some point I realized that I just don't use it. What I really need are the following bunch of tools:

  1. Different sizes and alignments of header
  2. Different alignments and positions of paragraph
  3. Some precompiled assets
  4. Images
  5. Videos
  6. Empty blocks for adding padding in the proper places

Precompiled assets - it's a set that consists of header and paragraph with some sort of settings for example. It just can save me some time

The result

Here you can see the final result in the action. I've made a beautiful and perfect content editor for myself. May be I'll pack it into the NPM-package. But I don't know yet. As I said, I'm lazy =)