未加星标

Creating a Block Editor with Markdown and Vue.js

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

Editing blocks of content is highly popular these days. WordPress is one of the last kids on the block, other content management systems like AEM or Magnolia follow the concept of content components since more than a decade now. So while I coded my small flat file cms called Typmill.net as a side project, I wondered if some kind of block editing could also bridge the gap between markdown and the not so tech-savvy mainstream-editors.

If you want to build a new editor-experience, then you can use one of the new editor-frameworks like prosemirror or slate, which also provide a realtime-wysiwyg-mode for markdown. However, I am not a professional software-developer and these frameworks are pretty complicated to start with. But I started to use Vue.js some month ago and so I decided to code my own block-editing-experience with Vue.sj from scratch. Don't expect a super high level frontend editor here, it is more like an experimental hacking and it is tightly coupled to Typemill, but the result might still be interesting:


Creating a Block Editor with Markdown and Vue.js

The typemill block editor as of november 2018

It is a quite big project, so I cannot show much code here, but maybe some basic ideas of the block-editing with markdown.

Markdown are Blocks by Definition

I am not sure if you are aware that markdown works with blocks by definition, because markdown uses two linebreaks to separate each block (paragraph). So you can transform a valid and normalized markdown-file into a simple array of content blocks with just one line ofphp-code:

$markdownArray = explode("\n\n", $markdown);

You have to deal with some edge-cases like code-blocks, but basically it is as simple as that.

A Backend Approach

With Vue.js you can fetch the markdown-array with an API in a JSON-format and then create your website in the frontend. I decided against that standard-way from two reasons:

I already use a highly interactive navigation built with vue, so the page renders very slow if you add the content-part on top of that. If I transform markdown to html in the frontend, then I have to maintain and extend two libraries: one markdown-parser in the backend (I use parsedown with several extensions) and one in the frontend (vue markdown parser for example).

So I decided for an uncommon way and used the backend for most of the tasks. With a php-library like parsedown it is pretty easy to transform the markdown-blocks into html-blocks similar like this:

$parsedown = new Parsedown(); $htmlArray = []; foreach($markdownArray as $markdownBlock) { $htmlArray[] = $parsedown->text($markdownBlock); }

In the frontend, I can print out each html-block with a simple loop. Rendering the page in the backend makes the initial page load pretty fast. At the same time, Vue.js enters the stage because I can print out each block into a vue component like this:

<?php foreach($htmlArray as $key => $htmlBlock): ?> <content-block> <div class="blox" @click.prevent="setData( $event )" data-id="<?php echo $key; ?>"><?php echo $htmlBlock; ?></div> </content-block> <?php endforeach; ?> The Vue-Part

The vue-part is pretty complex (and chaotic, sorry for that), so I cannot show code-examples but only explain the basic ideas. So basically I use three parts:

A vue app with some general tasks. A content-component as a frame or wrapper for each content-block. Dynamic components for each content-type (like paragraph, images and more).

The vue app loads the markdown-array in a JSON-format with an API-call after the page has loaded. I can connect the html on the page and the markdown in the vue-data with the ID now. I do this with the setData-method:

@click.prevent="setData( $event )"

With the data-id I can get the corresponding markdown part and use it in my content-component. You might think that this is a bit hacky, but I explained the reasons before...

The content-component is the frame that does all the general stuff: It gets the markdown-data from the vue-app for each block, it switches between the html-preview-mode and the markdown-edit-mode, and each content component has a button to save, cancel and delete a block. When I save the block, then I send the markdown-data to the backend. In the backend I store the block in the file (work with the ID again to get the appropriate block), transform the markdown block into html again and send it in the response back to the frontend.

The most exciting part are the dynamic component . This is the concept of vue, where you can switch a component dynamically:

<!-- Component changes when currentTabComponent changes --> <component v-bind:is="currentTabComponent"></component>

Vue explains the concept here and also provides some fiddles to play with.

I use this concept to open different components for different content types. The basic content type is a text-paragraph and this opens in the standard textarea-component. But I just added another component for handling images and a lot more will follow. Handling images can become pretty painful in some content-management-systems, so I think I found a quite user-friendly way:


Creating a Block Editor with Markdown and Vue.js

If you want to have a look (on typemill or github ), then don't expect high level code, as I said I am a hobby-developer and not a professional.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Creating a Block Editor with Markdown and Vue.js
本站链接:https://www.codesec.net/view/620801.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(12)