vue集成MarkDown编辑器插件

article/2025/11/2 23:00:24

这里我们选择的插件是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/"});});