标签:line min esb 事件 ati vue efault 定义 formdata
SpringBoot、Spring Security、Oauth2、Vue-element-admin
npm install mavon-editor --save
// 全局注册
import Vue from ‘vue‘
import mavonEditor from ‘mavon-editor‘
import ‘mavon-editor/dist/css/index.css‘
// use
Vue.use(mavonEditor)
new Vue({
‘el‘: ‘#main‘,
data() {
return { value: ‘‘ }
}
})
<mavon-editor v-model="form.contents" ref=md @imgAdd="imgAdd" @imgDel="imgDel" style="min-height: 450px"/>
// 绑定@imgAdd event
imgAdd(pos, $file){
// 第一步.将图片上传到服务器.
var formData = new FormData();
formData.append(‘file‘, $file);
uploadFile(formData).then(response => {
if (response.code === 0) {
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
// $vm.$img2Url 详情见本页末尾
this.$refs.md.$img2Url(pos, response.data);
} else {
this.msgError(response.msg);
}
});
},
imgDel(pos, url) {
console.log(pos)
console.log(url)
}
/*
默认工具栏按钮全部开启, 传入自定义对象
例如: {
bold: true, // 粗体
italic: true,// 斜体
header: true,// 标题
}
此时, 仅仅显示此三个功能键
*/
toolbars: {
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: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: true, // 帮助
/* 1.3.5 */
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存(触发events中的save事件)
/* 1.4.2 */
navigation: true, // 导航目录
/* 2.1.8 */
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
/* 2.2.1 */
subfield: true, // 单双栏模式
preview: true, // 预览
}
<mavon-editor
class="md"
:value="contents"
:subfield = "false"
:defaultOpen = "‘preview‘"
:toolbarsFlag = "false"
:editable="false"
:scrollStyle="true"
:ishljs = "true"
/>
contents是从数据库中读取的markdown格式数据
springboot+vue集成mavon-editor,开发在线文档知识库
标签:line min esb 事件 ati vue efault 定义 formdata
原文地址:https://www.cnblogs.com/entfrm/p/12623344.html