vue中添加markdown编辑器

我使用的mavonEditor编辑器，文档齐全传送门

1. 安装

   npm install mavon-editor --save
   

2. 引入

    #在main.js中 -- 全局引入
    import mavonEditor from 'mavon-editor';
    import 'mavon-editor/dist/css/index.css';
    Vue.use(mavonEditor);
   

3. 使用

   <!-- vue中使用markdown编辑器 -->
   <template>
       <div>
           <mavon-edtior v-model="content" />
       </div>
   </template>
   <script>
   import { mavonEditor } from "mavon-editor"; // 页面引入
   import "mavon-editor/dist/css/index.css";
   export default {
     components: {
       mavonEditor,
     },
   </script>
   

4. 更多使用信息及api点击这里

5. 解决解析后的数据回显到页面样式丢失的问题

   1). 安装支持markdown样式插件

   npm install github-markdown-css
   

   2). 在main.js中引入

    #在main.js中 -- 全局引入
    #markdown编辑器
    import mavonEditor from 'mavon-editor';
    import 'mavon-editor/dist/css/index.css';
   
    #markdown样式
    import 'github-markdown-css';
    Vue.use(mavonEditor);
   

   3). 使用

   <!-- markdown数据回显 -->
   <template>
       <div>
           <!-- 将class加上markdown-body 即可 -->
           <article class="markdown-body" v-model="htmlData"></article>
       </div>
   </template>
   <script>
       export default{
           data(){
               return{
                   htmlData:"...", // 解析后的html数据
               }
           }
       }
   </script>