vue的markdown插件的使用

首先是在頁面引入

import { mavonEditor } from 'mavon-editor'

import 'mavon-editor/dist/css/index.css'

 

 

data 中定義option

 markdownOptionAll:{
                 bold: true, // 粗體
                italic: true, // 斜體
                header: true, // 標題
                underline: true, // 下划線
                strikethrough: true, // 中划線
                mark: true, // 標記
                superscript: true, // 上角標
                subscript: true, // 下角標
                quote: true, // 引用
                ol: true, // 有序列表
                ul: true, // 無序列表
                link: true, // 鏈接
                imagelink: true, // 圖片鏈接
                code: true, // code
                table: true, // 表格
                fullscreen: false, // 全屏編輯
                readmodel: false, // 沉浸式閱讀
                htmlcode: true, // 展示html源碼
                help: true, // 幫助
                /* 1.3.5 */
                undo: true, // 上一步
                redo: true, // 下一步
                trash: true, // 清空
                save: false, // 保存（觸發events中的save事件）
                /* 1.4.2 */
                navigation: true, // 導航目錄
                /* 2.1.8 */
                alignleft: true, // 左對齊
                aligncenter: true, // 居中
                alignright: true, // 右對齊
                /* 2.2.1 */
                subfield: false, // 單雙欄模式
                preview: true, // 預
                ishljs:true
            }, 

引入組件

 components: {
        mavonEditor
    },

使用組件

<mavon-editor v-model="formItem.note" :codeStyle="codeStyle"  :toolbars="markdownOption" id="myTextEditor-note" ref="myTextEditor-note" @imgAdd="$imgAdd(arguments,'myTextEditor-note')" @change="changeData(arguments,'note')"  style="max-height: 120px"/>

methods

arg中包含了插入的位置和圖片數據
$imgAdd:async function(arg,idname){ 上傳圖片
            let fd = new FormData()
            fd.append('image', arg[1]);
            let info = await uploadImg(fd);
            this.editorName = idname;
            if(info.status == 200){
                this.fileFn(info,arg[0]);
            };
},
上傳成功之后，返回的圖片url插入到鼠標位置
 fileFn(response,pos){
            // let editor = this.$refs[this.editorName].quill;
            // 如果上傳成功
            if (response) {
                this.uploadLoading = false;
                
                //  獲取光標所在位置
                let baseurl = process.env.NODE_ENV=="development"?"http://10.1.1.1:10/":'http://10.2.2.2:20/';
                this.$refs[this.editorName].$img2Url(pos,baseurl+response.data);
            } else {
                // 提示信息，需引入Message
                this.$Message.error('圖片插入失敗')
            }
},
//將markdown內容換成html

changeData(arg,name){

    arg[1] 為html內容

// this.formItem_html[name] = arg[1];

},