mteditor v2.2.2
MTEditor
MTEditor超轻量级Vue富文本编辑器,使用方式更符合你的习惯 1. 大小只有 160K 1. 图片功能, - 本地图片, - 网路图片 - 上传图片到自己的服务器, - 右键调整图片在富文本中的百分比 2. 表格功能 - 快速新建表格,可以通过右键对表格进行行列操作,例如新增行,删除行,以及删除整个表格。 - 表格的列是等宽的,
维护
单兵作战,一个富文本也没太多东西需要维护的。如果实在想加一些自定义功能,源码应该也容易看得懂。 如果有疑问可以提 issue 或者加 qq群:519967151
属性
属性名 | 描述 | 示例 |
---|---|---|
height | 富文本高度 | 500px |
width | 富文本宽度 | 500px |
config | 工具栏配置 | 默认可以不设置,具体设置看以下config |
函数
函数名 | 描述 |
---|---|
uploadMethod | 图片上传的函数,详情请看示例 |
头部配置,可按需分配
{
"标题": { "command": "h", "icon": "fa fa-header", "title": "标题", "popup": true, 'component': 'headerList' },
"加粗": { "command": "bold", "icon": "fa fa-bold", "title": "加粗" },
"斜体": { "command": "italic", "icon": "fa fa-italic", "title": "斜体" },
"字体": { "command": "fontSize", "icon": "fa fa-font", "title": "字体", "popup": true, 'component': 'fontList' },
"下划线": { "command": "underline", "icon": "fa fa-underline", "title": "下划线" },
"删除线": { "command": "strikethrough", "icon": "fa fa-strikethrough", "title": "删除线" },
"居左": { "command": "justifyLeft", "icon": "fa fa-align-left", "title": "居左" },
"居中": { "command": "justifyCenter", "icon": "fa fa-align-center", "title": "居中" },
"居右": { "command": "justifyRight", "icon": "fa fa-align-right", "title": "居右" },
"两侧": { "command": "justifyFull", "icon": "fa fa-align-justify", "title": "两侧" },
"无序列表": { "command": "InsertUnorderedList", "icon": "fa fa-list-ul", "title": "无序列表" },
"有序列表": { "command": "insertOrderedList", "icon": "fa fa-list-ol", "title": "有序列表" },
"上标": { "command": "superscript", "icon": "fa fa-superscript", "title": "上标" },
"下标": { "command": "subscript", "icon": "fa fa-subscript", "title": "下标" },
"链接":{"command":"CreateLink","icon":"fa fa-link","title":"链接","popup":true,'component':'linkBox'},
"表格": { "command": "table", "icon": "fa fa-table", "title": "表格", "popup": true, 'component': 'tableBox' },
"图片": { "command": "img", "icon": "fa fa-image", "title": "图片", "popup": true, 'component': 'imageBox' },
"擦除": { "command": "removeFormat", "icon": "fa fa-eraser", "title": "擦除" },
"撤销": { "command": "undo", "icon": "fa fa-undo", "title": "撤销" },
"重做": { "command": "redo", "icon": "fa fa-repeat", "title": "重做" }
}
使用方式
- 通过vue插件的方式导入,在main.js导入
import mtEditor from 'mteditor'
Vue.use(mtEditor)
- 在组件中使用
<template>
<div id="app">
<mt-editor
height="500px"
width="100%"
v-model="editorContent"
:uploadMethod="uploadMethod"
></mt-editor>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data () {
return {
editorContent: '',
config: {
"标题": { "command": "h", "icon": "fa fa-header", "title": "标题", "popup": true, 'component': 'headerList' },
"加粗": { "command": "bold", "icon": "fa fa-bold", "title": "加粗" },
"斜体": { "command": "italic", "icon": "fa fa-italic", "title": "斜体" },
"字体": { "command": "fontSize", "icon": "fa fa-font", "title": "字体", "popup": true, 'component': 'fontList' },
"下划线": { "command": "underline", "icon": "fa fa-underline", "title": "下划线" },
"删除线": { "command": "strikethrough", "icon": "fa fa-strikethrough", "title": "删除线" },
"居左": { "command": "justifyLeft", "icon": "fa fa-align-left", "title": "居左" },
"居中": { "command": "justifyCenter", "icon": "fa fa-align-center", "title": "居中" },
"居右": { "command": "justifyRight", "icon": "fa fa-align-right", "title": "居右" },
"两侧": { "command": "justifyFull", "icon": "fa fa-align-justify", "title": "两侧" },
"无序列表": { "command": "InsertUnorderedList", "icon": "fa fa-list-ul", "title": "无序列表" },
"有序列表": { "command": "insertOrderedList", "icon": "fa fa-list-ol", "title": "有序列表" },
"上标": { "command": "superscript", "icon": "fa fa-superscript", "title": "上标" },
"下标": { "command": "subscript", "icon": "fa fa-subscript", "title": "下标" },
"表格": { "command": "table", "icon": "fa fa-table", "title": "表格", "popup": true, 'component': 'tableBox' },
"图片": { "command": "img", "icon": "fa fa-image", "title": "图片", "popup": true, 'component': 'imageBox' },
"擦除": { "command": "removeFormat", "icon": "fa fa-eraser", "title": "擦除" },
"撤销": { "command": "undo", "icon": "fa fa-undo", "title": "撤销" },
"重做": { "command": "redo", "icon": "fa fa-repeat", "title": "重做" }
}
}
},
methods: {
/**
* @description 上传图片函数,在该函数内完成图片的上传操作
* @param
* params参数:该参数里包含了要上传的图片,由富文本调用uploadMethod方法时传递过来
* {fd:fd}
*/
uploadMethod (params) {
// 1 获取需要上传的图片formdata
let fd = params.fd;
// 2 拼接除了文件之外,接口需要的参数,如果没有则不需要再拼接,以下是例子
fd.append('username', 'zmt')
// 3.调用真实的图片上传接口,由于现在大部分接口都是promise封装的,我这里就用一个Promise来做示意
return new Promise((resolve) => {
/*
4. 将图片数据取出,组成以下格式,传给
{
imgURL: '图片地址'
}
*/
resolve({
imgURL: '图片地址'
})
})
}
},
}
</script>
<style>
</style>
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago