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

makeFoxPlay 发布于2019-08-01 16:31 / 2579人阅读

摘要：首先，我承认标题党的嫌疑是逃不掉的了但是，诸君请继续看下去，就会发现还是有干货的源码写这个编辑器的难点有两个对文本进行语法的解析实时检测页面文本变化针对，我在上找到了，看就能很快地上手针对，我选择的是，因为我看中了她的双向绑定特性当然数据和

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

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

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

１．对文本进行Markdown语法的解析

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

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

index.html

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，主要正则玩的溜就够了．

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

云服务器 GPU云服务器 web实现实时通讯 markdown在线编辑器 webrtc 实时预览 java文档预览实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50576.html

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

摘要：首先，我承认标题党的嫌疑是逃不掉的了但是，诸君请继续看下去，就会发现还是有干货的源码写这个编辑器的难点有两个对文本进行语法的解析实时检测页面文本变化针对，我在上找到了，看就能很快地上手针对，我选择的是，因为我看中了她的双向绑定特性当然数据和首先，我承认标题党的嫌疑是逃不掉的了．．．但是，诸君请继续看下去，就会发现还是有干货的源码：https://github.com/shuiRo...

Mertens 2019-08-20 15:10 评论0 收藏0
Top 10 JavaScript编辑器，你在用哪个？

摘要：在这个编辑器中，和是其中排名靠前的两个。是一个免费的轻量级编辑器和，用于和开发。对于免费的代码编辑器来说，是一个很好的选择。可以安装两个命令行实用程序，用于从启动编辑器，用于管理的软件包。对于JavaScript程序员来说，目前有很多很棒的工具可供选择。本文将会讨论10个优秀的支持javascript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。为什...

zombieda 2019-08-21 11:45 评论0 收藏0
靡不有初，鲜克有终——写在VNote半周岁

摘要：舒适的编辑体验通过语法高亮，最大地消除与生俱来的编辑和阅读的割裂感。所以，是不是又少了一个回到阅读模式的借口代码块语法高亮通过插件可以支持代码块里面的代码语法高亮，其他的编辑器好像没有支持。首发于简书. showImg(https://segmentfault.com/img/remote/1460000009164987); 从去年的十一开始到今天，VNote已经半周岁了，也迭代到...

roland_reed 2019-06-28 10:21 评论0 收藏0
[原]深入对比数据科学工具箱：Python和R 的 Web 编辑器

摘要：概述工欲善其事必先利其器，如果现在要评选数据科学中最好用的编辑器注意一定是可以通过访问的，和一定是角逐的最大热门，正确使用编辑器可以很大地提升我们的工作效率。概述 showImg(https://segmentfault.com/img/bVAdol); 工欲善其事必先利其器，如果现在要评选数据科学中最好用的Web 编辑器（注意一定是可以通过Web访问的），RStudio和Jupyt...

RobinQu 2019-07-25 10:40 评论0 收藏0
【效率专精系列】善用API统一描述语言提升RestAPI开发效率

摘要：其标准为前身是，提供强大的在线编辑功能，包括语法高亮错误提示自动完成实时预览，并且支持用户以格式撰写导入导出转换文档。团队内部RestAPI开发采用设计驱动开发的模式，即使用API设计文档解耦前端和后端的开发过程，双方只在联调与测试时耦合。在实际开发和与前端合作的过程中，受限于众多因素的影响，开发效率还有进一步提高的空间。本文的目的是优化工具链支持，减少一部分重复和枯燥的劳动。现状...

tianyu 2019-08-16 10:42 评论0 收藏0