vue的markdown插件的使用

Posted 2020-12-14 fyjz

首先是在页面引入

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];

},