vue项目开发markdown编辑器-阿里云开发者社区

开发者社区> 开发与运维> 正文

vue项目开发markdown编辑器

简介: 使用mavon-editor编辑器 安装 npm install mavon-editor --save 在main.js中引入 全局引入 import mavonEditor form 'mavon-editor' import 'mavon-editor/dist/css/index.

使用mavon-editor编辑器_2019_07_31_11_30_25

安装

npm install mavon-editor --save

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

当然你也可以局部引入
import {mavonEditor} form "mavon-editor"
import 'mavon-editor/dist/css/index.css'

components: {mavonEditor}

获取结果传给后台

this.$refs.editor.d_value  // 获取输入的文本
this.$refs.editor.d_render // 获取编辑后的文本(将这个传给后台)

预览查看富文本

<mavon-editor
    v-html="blogData.content"
    defaultOpen='preview'
    :subfield="false"
    :toolbarsFlag="false"
    :boxShadow="false"
></mavon-editor>

图片上传

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例,可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后,`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>,`$vm`为 `this.$refs.md`
               */
               $vm.$img2Url(pos, url);
           })
        }
    }
}

更多详细信息,请点击查看官网

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章