这里我们选择的插件是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文件的路径
效果图