vue 实现 markdown书写博客 showdown

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

引入showdown

npm install showdown --save

测试界面

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

      <el-input
          type="textarea"
          :rows="20"
          placeholder="请输入内容"
          v-model="textarea"
          style="float: left;width:45%;">
      </el-input>
      <div class="show" id="show">res</div>

实例化 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 代码

<script>
export default {
  name: "write",
  data() {
    return {
      'textarea': '',
      'converter': null
    }
  },
  watch: {
    'textarea': 'Changed'
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var showdown = require('showdown');
      this.converter = new showdown.Converter();
    },
    Changed() {
      document.getElementById('show').innerHTML = this.converter.makeHtml(this.textarea);
    },
    submit() {
      $('.ui.modal')
          .modal('show')
      ;
    }
  }
}
</script>

template 代码

 <template>
 <el-input
          type="textarea"
          :rows="20"
          placeholder="请输入内容"
          v-model="textarea"
          style="float: left;width:45%;">
      </el-input>
      <div class="show" id="show">res</div></template>

效果如下：