mavoneditor 显示html,Markdown编辑器 mavonEditor

Markdown编辑器 mavonEditor

前端

• HTML

• Markdown

• 627次浏览

• 0次点赞

• 2019-01-25 21:46

mavonEditor 是基于Vue的markdown编辑器 githup 项目地址

1. 安装

npm install mavon-editor --save

2. 使用

main.js

import mavonEditor from 'mavon-editor'

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

Vue.use(mavonEditor)

xxx.vue

export default {

data() {

return {

toolbars: {

bold: true, // 粗体

italic: true, // 斜体

header: true, // 标题

underline: true, // 下划线

strikethrough: true, // 中划线

mark: true, // 标记

superscript: false, // 上角标

subscript: false, // 下角标

quote: true, // 引用

ol: true, // 有序列表

ul: true, // 无序列表

link: true, // 链接

imagelink: true, // 图片链接

code: true, // code

table: true, // 表格

fullscreen: true, // 全屏编辑

readmodel: true, // 沉浸式阅读

htmlcode: false, // 展示html源码

help: true, // 帮助

/* 1.3.5 */

undo: false, // 上一步

redo: false, // 下一步

trash: false, // 清空

save: false, // 保存(触发events中的save事件)

/* 1.4.2 */

navigation: false, // 导航目录

/* 2.1.8 */

alignleft: false, // 左对齐

aligncenter: false, // 居中

alignright: false, // 右对齐

/* 2.2.1 */

subfield: true, // 单双栏模式

preview: false // 预览

}

}

},

methods: {

// 绑定@imgAdd event

$imgAdd(pos, $file){

// 第一步.将图片上传到服务器.

var formdata = new FormData();

formdata.append('image', $file);

this.http.axios({

url: '/upload',

method: 'post',

data: formdata,

headers: { 'Content-Type': 'multipart/form-data' },

}).then((url) => {

// 第二步.将返回的url替换到文本原位置 -> 

/**

* $vm 指为mavonEditor实例，可以通过如下两种方式获取

* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`

* 2. 通过$refs获取: html声明ref : `，`$vm`为 `this.$refs.md`

*/

this.$refs.md.$img2Url(pos, url);

})

}

}

}