在vue中集成markdown富文本編輯器

在vue中引入集成markdown富文本編輯器

這里我們使用 mavonEditor，鏈接：https://github.com/hinesboy/mavonEditor

1、安裝

npm install mavon-editor --save

2、在main.js中注冊編輯器組件

    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
 // 注冊mavon-editor組件
    Vue.use(mavonEditor);
    new Vue({
        'el': '#main'
   })

 3、集成到vue組件中

<template>
      <div id="editor">
        <mavon-editor
          style="height: 100%"
          v-model="editorContent"
          :ishljs="true"
          ref=md
          @imgAdd="imgAdd"
          @imgDel="imgDel"
        ></mavon-editor>
      </div>
</template>

​
<script>
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css';
  export default {
      name: "Write",
      data(){
          return {
             
         }
     },
      
      components: {
        mavonEditor
     },
      
</script>

 4、編輯圖片上傳及刪除功能

圖片上傳使用到@imgAdd="imgAdd"中的 imgAdd方法，對此方法編輯ajax請求即可

圖片刪除使用到@imgDel="imgDel"中的 imgDel方法，對此方法編輯ajax請求即可

該編輯器可使用Ctrl + S 進行快捷鍵保存文檔，可進入該編輯器官方文件查看，保存使用的方法，從而對此方法編輯ajax請求即可

官方文檔：https://github.com/hinesboy/mavonEditor