码迷,mamicode.com
首页 > 其他好文 > 详细

vue的markdown插件的使用

时间:2020-07-01 20:14:28      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:pos   view   note   argument   message   mit   table   插件   redo   

首先是在页面引入

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

 

vue的markdown插件的使用

标签:pos   view   note   argument   message   mit   table   插件   redo   

原文地址:https://www.cnblogs.com/fyjz/p/13220932.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!