前端项目实现Markdown编辑器

接触Markdown是写博客时，发现Markdown的语法简洁又很全面，在写文章时可以专注于文字内容而不是排版效果，因此自己实现了将Markdown引入到前端中

一、引入showdown

showdown是markdown的开源库，内置markdown的转换机制，我们直接引入到项目中即可
方式1： github上下载
github地址 https://github.com/showdownjs/showdown
下载后找到dist文件夹中的showdown.min.js文件，拷贝到项目中
js脚本中引入文件即可
方式2： npm命令
下载showdown npm install showdown --save
下载markdown-loader、html-loader npm i markdown-loader html-loader --save
（目的是为了识别markdown中的特殊格式）
webpack.base.conf.js 中添加 rules 规则

{
  test: /\.md$/,
  use: [
    {loader: 'html-loader'},
    {loader: 'markdown-loader', options: {}}
  ]
}

vue中直接引入
import showdown from 'showdown'

二、构建DOM

页面分左右两部分，左边是input文本框，右边是格式化后的文本框内容
页面初始化时创建converter实例
input绑定change事件，框内文字变化后，调用makeHtml函数获得转换后的html内容，
v-html指令显示页面效果

<template>
  <div>
    <el-row>
      <el-col :span="11">
        <el-input
          type="textarea"
          :rows="35"
          v-model="text"
          @change="convertText">
        </el-input>
      </el-col>
      <el-col :span="12" :offset="1">
        <div v-html="html" class="text">
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script type="text/ecmascript-6">
  import showdown from 'showdown'

  export default {
    data() {
      return {
        html: '',
        text: '',
        converter: {}
      }
    },
    components: {
      showdown
    },
    methods: {
      convertText() {
        this.html = this.converter.makeHtml(this.text);
      }
    },
    mounted() {
      //创建实例
      this.converter = new showdown.Converter();
    }
  }
</script>

三、给Markdown加点样式

网上有很多Markdown好看的样式，我们可以直接下载使用
我用的是少数派的css样式，红黑色系为主
地址 https://cdn.sspai.com/minja/sspai.css.zip
更多样式可参考 https://sspai.com/post/43873
下载后直接引入即可

<style lang="less" scoped>
  @import "../../../styles/markdown.css";
</style>

最后来贴张效果图