【UEditor】百度富文本的引入使用
1.npm
npm install vue-ueditor-wrap // 或者 yarn add vue-ueditor-wrap
2. UEditor 文件放入public静态目录
3. template
<template> <div class="projBox"> <vue-ueditor-wrap ref="uEditor" v-model="mainContent" :config="myConfig" ></vue-ueditor-wrap> </div> </template>
4. 配置
1 mainContent: '', 2 // 绑定的富文本内容，为标签结构 3 // 纯文本使用$refs.uEditor.editor.getContentTxt() 4 myConfig: { 5 // 在本地和服务器的时候地址不同，需动态配置 6 UEDITOR_HOME_URL: '/UEditor/', 7 toolbars: [ 8 [ 9 'undo', 10 'bold', 11 'indent', 12 'italic', 13 'underline', 14 'strikethrough', 15 'subscript', 16 'fontborder', 17 'superscript', 18 'formatmatch', 19 'fontfamily', 20 'fontsize', 21 'justifyleft', 22 'justifycenter', 23 'justifyright', 24 'justifyjustify', 25 'insertorderedlist', 26 'insertunorderedlist', 27 'lineheight' 28 ] 29 ], 30 // 编辑器不自动被内容撑高 31 autoHeightEnabled: false, 32 // 将元素路径去掉 33 elementPathEnabled: false, 34 // 工具栏是否可以浮动 35 autoFloatEnabled: false, 36 // 初始容器高度 37 initialFrameHeight: 200, 38 // 初始容器宽 39 initialFrameWidth: '100%', 40 // 关闭自动保存 41 enableAutoSave: false, 42 maximumWords: 5, 43 wordCount: true, 44 wordCountMsg: '', 45 wordOverFlowMsg: '<span style="color:red;">最多输入5个字符</span>' 46 },
* 关于地址的配置
UEDITOR_HOME_URL: process.env.VUE_APP_PUBLIC_PATH + 'UEditor/',
// 本地环境 VUE_APP_PUBLIC_PATH = '/' // 生产环境 VUE_APP_PUBLIC_PATH = '/vipp/'
* 工具栏的完整释义
1 toolbars: [ 2 [ 3 'anchor', //锚点 4 'undo', //撤销 5 'redo', //重做 6 'bold', //加粗 7 'indent', //首行缩进 8 'snapscreen', //截图 9 'italic', //斜体 10 'underline', //下划线 11 'strikethrough', //删除线 12 'subscript', //下标 13 'fontborder', //字符边框 14 'superscript', //上标 15 'formatmatch', //格式刷 16 'source', //源代码 17 'blockquote', //引用 18 'pasteplain', //纯文本粘贴模式 19 'selectall', //全选 20 'print', //打印 21 'preview', //预览 22 'horizontal', //分隔线 23 'removeformat', //清除格式 24 'time', //时间 25 'date', //日期 26 'unlink', //取消链接 27 'insertrow', //前插入行 28 'insertcol', //前插入列 29 'mergeright', //右合并单元格 30 'mergedown', //下合并单元格 31 'deleterow', //删除行 32 'deletecol', //删除列 33 'splittorows', //拆分成行 34 'splittocols', //拆分成列 35 'splittocells', //完全拆分单元格 36 'deletecaption', //删除表格标题 37 'inserttitle', //插入标题 38 'mergecells', //合并多个单元格 39 'deletetable', //删除表格 40 'cleardoc', //清空文档 41 'insertparagraphbeforetable', //"表格前插入行" 42 'insertcode', //代码语言 43 'fontfamily', //字体 44 'fontsize', //字号 45 'paragraph', //段落格式 46 'simpleupload', //单图上传 47 'insertimage', //多图上传 48 'edittable', //表格属性 49 'edittd', //单元格属性 50 'link', //超链接 51 'emotion', //表情 52 'spechars', //特殊字符 53 'searchreplace', //查询替换 54 'map', //Baidu地图 55 'gmap', //Google地图 56 'insertvideo', //视频 57 'help', //帮助 58 'justifyleft', //居左对齐 59 'justifyright', //居右对齐 60 'justifycenter', //居中对齐 61 'justifyjustify', //两端对齐 62 'forecolor', //字体颜色 63 'backcolor', //背景色 64 'insertorderedlist', //有序列表 65 'insertunorderedlist', //无序列表 66 'fullscreen', //全屏 67 'directionalityltr', //从左向右输入 68 'directionalityrtl', //从右向左输入 69 'rowspacingtop', //段前距 70 'rowspacingbottom', //段后距 71 'pagebreak', //分页 72 'insertframe', //插入Iframe 73 'imagenone', //默认 74 'imageleft', //左浮动 75 'imageright', //右浮动 76 'attachment', //附件 77 'imagecenter', //居中 78 'wordimage', //图片转存 79 'lineheight', //行间距 80 'edittip ', //编辑提示 81 'customstyle', //自定义标题 82 'autotypeset', //自动排版 83 'webapp', //百度应用 84 'touppercase', //字母大写 85 'tolowercase', //字母小写 86 'background', //背景 87 'template', //模板 88 'scrawl', //涂鸦 89 'music', //音乐 90 'inserttable', //插入表格 91 'drafts', // 从草稿箱加载 92 'charts', // 图表 93 ] 94 ]
