12行代码完成一个Web版Markdown编辑器: 及时预览

2024年4月29日 89次阅读 来源: 林水溶

起首，我认可题目党的嫌疑是逃不掉的了．．．然则，诸君请继承看下去，就会发明照样有干货的

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

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

１．对文本举行Markdown语法的剖析

２．及时检测页面文本变化．

针对１，我在Gayhub上找到了markedJS，看README就可以很快地上手．
针对２，我挑选的是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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞