vue 实现 markdown书写博客 showdown

因为前端开发需要，需要一个可以支持markdown语法来书写博客的界面，经过查询本人选取了第三方开源库showdown，它可以将markdown语法解析展示，正是本人所需要的地方。

引入showdown

npm install showdown --save

测试界面

这里用到的是element-ui 没有太大影响放在template标签中

      
      
      
res

实例化 showdown以及其converter

这里需要配合mounted函数来使用

var showdown = require('showdown');
this.converter = new showdown.Converter();

数据变动检测

用到的是vue中的watch方法，这里不赘述。

  watch: {
     
    'textarea': 'Changed'
  },

数据变化后执行函数

    Changed() {
     
      document.getElementById('show').innerHTML = this.converter.makeHtml(this.textarea);
    }

scrpit 代码

template 代码

效果如下：