vue集成MarkDown编辑器插件

这里我们选择的插件是editor.md的插件

首先我们先下载这个插件到本地
官网有提供github下载和npm下载两种方式 , 这里我选择npm下载

npm install editor.md

下载后我们需要拷贝一些文件到自己的项目中

将上面的八个文件拷贝到自己的vue项目的static目录中的editormd文件夹下面

然后在我们的vue项目中的index.html文件中引入editormd的样式文件和js文件

  <!--引入MarkDown编辑器的样式-->
  <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./static/lib/editormd/css/editormd.min.css" />

<!--jQuery-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--引入MarkDown插件的js-->
<script src="./static/lib/editormd/editormd.min.js"></script>

这里要特别注意 , 我们必须要先引入jquery再引入editormd , 注意代码的顺序

在vue组件中集成editormd的代码

<div class="field">
  <div id="md-content" style="z-index: 1 !important; opacity: 1">
      <textarea style="display:none;">[TOC]#### Disabled options</textarea>
  </div>
</div>

在mounted钩子函数中编写下面的代码

	  // 对MarkDown插件编辑器的引入
      var testEditor;
      $(function() {
        testEditor = editormd("md-content", {
          width   : "100%",
          height  : 640,
          syncScrolling : "single",
          path    : "../../../static/lib/editormd/lib/"
        });
      });

这里注意两点:

• editormd中的md-content和上面div的id值一致

• path中的路径写的是editormd下面的那个lib文件的路径

效果图