mteditor

2024-04-05 04:44| 来源: 网络整理| 查看: 265

MTEditor

MTEditor超轻量级Vue富文本编辑器，使用方式更符合你的习惯

大小只有 160K 图片功能，本地图片，网路图片上传图片到自己的服务器，右键调整图片在富文本中的百分比表格功能快速新建表格，可以通过右键对表格进行行列操作，例如新增行，删除行，以及删除整个表格。表格的列是等宽的，维护

单兵作战，一个富文本也没太多东西需要维护的。如果实在想加一些自定义功能，源码应该也容易看得懂。如果有疑问可以提 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) 在组件中使用 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: '图片地址' }) }) } }, }

【本文地址】

公司简介

联系我们