12行代码实现一个Web版Markdown编辑器: 实时预览

首先,我承认标题党的嫌疑是逃不掉的了...但是,诸君请继续看下去,就会发现还是有干货的

源码https://github.com/shuiRong/m…
Demohttps://shuirong.github.io/src/

写这个Markdown编辑器的难点有两个

1.对文本进行Markdown语法的解析

2.实时检测页面文本变化.

针对1,我在Gayhub上找到了markedJS,看README就能很快地上手.
针对2,我选择的是VueJS,因为我看中了她的双向绑定特性(当然数据和视图间的单向绑定就够了).而且VueJS非常轻量,简单容易上手不说,中文文档简直业界良心.
注:代码高亮部分我用的是highlight.js

index.html

<div id='container'>
        <textarea id='editor' v-model='text'>
        </textarea>
        <div id='server' v-html='markedText'>  
        </div>
    </div>

main.js

var vm = new Vue({
    el: '#container',
    data: {
        text: ''
    },
    computed: {
        markedText: function(){
            return marked(this.text);
        }
    }
});

核心部分就是这些了.再自定义下相关CSS,一个支持实时预览的Markdown编辑器就搞定了.

这么简单?当然不能这么说.因为最难的markdown语法解析和实时预览部分引用了别处的代码.如果都是自己实现的话,够喝一壶的了.

既然说到这里,那就聊聊MD语法解析和数据的双向绑定的实现.

  • MD语法解析:简单实现玩玩的话,基本的HTML/CSS/JS,主要正则玩的溜就够了.

  • 实时预览的重点在于数据和视图间的单向绑定.进一步介绍看这里

    原文作者:林水溶
    原文地址: https://segmentfault.com/a/1190000008723000
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞