使用Vue构建Markdown编辑器

写本文的目的是为了梳理Vue的相关知识。

准备

本项目代码已托管在Github

在线地址markdown_editor

代码分析

<div id="editor">
    <textarea :value="input" @input="update"></textarea>
    <div v-html="compiledMarkdown"></div>
</div>
    <script>
            new Vue({
                el: '#editor',
                data: {
                    input: '# hello'
                },
                computed: {
                    compiledMarkdown: function () {
                        return marked(this.input, { sanitize: true })
                    }
                },
                methods: {
                    update: _.debounce(function (e) {
                        this.input = e.target.value
                    }, 300)
                }
            })
    </script>

代码省略了样式部分以及marked.js和underscore.js的引入。

先从html结构来看,页面分成左右结构。左边为markdown编辑区,右边为markdown编译区。

编辑区用<textarea>标签来定义。在标签中通过v-bind:(缩写为:)绑定value属性,同时通过v-on(缩写为@)绑定事件监听,v-on:需要接收一个定义的方法来调用,此处的update正是在下面的methods属性中定义的。

通过v-on:指令来监听文本框的输入,获取内容的函数作为_.debounce参数,另一个作为时间参数的值为300,而输入的值会用户停止操作的300m后作为参数传给marked()然后被编译成html格式再返回。

所以本人认为<textarea>中的value属性负责返回文本框的内容,然后Vue实例中的update将输入的value传给compiledMarkdown属性中的方法,该方法返回经过编译的html

以上大概就是vue制作markdown编辑器的大概分析。

本人刚开始接触Vue.js,对其功能实现的理解难免有误,若您在阅读本文时发现问题,可以在文章下方的评论中指出,也可以通过邮件将问题发送给我,我会第一时间处理,感谢。

本文参考