• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue 实现 markdown书写博客 showdown

互联网 diligentman 2周前 (02-22) 6次浏览

因为前端开发需要,需要一个可以支持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>

效果如下:

vue 实现 markdown书写博客 showdown


程序员灯塔
转载请注明原文链接:vue 实现 markdown书写博客 showdown
喜欢 (0)