1.npm i wangeditor --save下载 [v4]
2.在单页面引用
import E from "wangeditor"
3.编辑器在html中使用:
写一个div添加如下 id="div1"
4.data定义参数
return:{
form: { plan: '', // 保障计划 },
editor1: null,
editorData01: '',}
5.单个编辑器配置
const editor1 = new E('#div1')
// 注意:多个使用直接添加即可 const editor1 = new E('#div1','#div2')
菜单栏配置:
/* 配置菜单栏 */
editor1.config.menus = [
'head', // 标题'
bold', // 粗体'
fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线'
strikeThrough', // 删除线'
foreColor', // 文字颜色
'backColor', // 背景颜色'
link', // 插入链接'
justify', // 对齐方式
'quote', // 引用'
image', // 插入图片
'table', // 表格
'undo', // 撤销'
redo' // 重复
// 'list', // 列表
// 'emoticon', // 表情
// 'video', // 插入视频
// 'code', // 插入代码
]
颜色配置:
// 配置颜色（文字颜色、背景色）
editor1.config.colors = [ '#000000', '#fff', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b' ]
字体配置:
// 配置字体--自定义字体
editor1.config.fontNames = [ '黑体', '仿宋', '楷体', '标楷体', '华文仿宋', '华文楷体', '宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana', 'Times New Roman', 'Courier New' ]
字号配置:
// 配置字号
editor1.config.fontSizes = {'x-small': { name: '12px', value: '1' },small: { name: '13px', value: '2' },normal: { name: '16px', value: '3' },large: { name: '18px', value: '4' },'x-large': { name: '24px', value: '5' },'xx-large': { name: '32px', value: '6' },'xxx-large': { name: '48px', value: '7' }}
行高配置:
// 配置行高
editor1.config.lineHeights = ['1', '1.15', '1.6', '2', '2.5', '3']
链接配置:
// 插入链接效验 editor1.config.linkCheck = function (text, link) {
if (link !== '') { var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-,@?^=%&:/#]*[\w\-?^=%&/#])?/
if (!reg.test(link)) { return '请输入正确的网址(例如 baidu.com)' } else { return true } } }
editor1.config.debug = true // 开启debug模式
editor1.config.showLinkImg = false // 禁止上传网络图片 editor1.config.uploadImgMaxLength = 1 // / 限制一次最多上传 5 张图片 */ editor1.config.uploadImgMaxSize = 3 * 1024 * 1024 // /* 将图片大小限制为 3M 默认为5M /
editor1.config.uploadImgShowBase64 = false // 使用 base64 保存图片 editor1.config.uploadImgServer = '/insurance.php?c=index&a=upload' // 这是服务器端上传图片的接口路径
editor1.config.uploadFileName = 'file' // 后端接受上传文件的参数名 editor1.config.uploadImgHeaders = { Accept: 'multipart/form-data' } editor1.config.uploadImgParams = { // 上传图片时可自定义传递一些参数
token: local.get('token_bx') }
上传图片配置:
// 可使用监听函数在上传图片的不同阶段做相应处理
editor1.config.uploadImgHooks = {
before: function (xhr, editor, files) {// 图片上传之前触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件},
// 图片上传并返回结果，但图片插入错误时触发
fail: function (xhr, editor, result) {
console.log(result, 'fail')},
success: function (xhr, editor, result) {// 图片上传并返回结果，图片插入成功之后触发console.log(result, 'success')},
error: function (xhr, editor, result) {// 图片上传出错时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
console.log(result, 'error')},
customInsert: function (insertImg, result, editor) {
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
console.log('result', result)
insertImg(result.data.src) // 图片路径插入到富文本框中
}}
配置 onchange 回调函数，将数据同步到 vue 中:
editor1.config.onchange = (newHtml) => { this.editorData01 = newHtml }
创建编辑器:
editor1.create()
this.editor1 = editor1
6.接口获取参数方式
// 通过代码获取编辑器内容
this.form.plan = this.editor1.txt.html()
7.接口返回编辑器数据,回显编辑器
this.editor1.txt.html(this.form.plan)
8.编辑器层级修改:
/deep/.w-e-toolbar { z-index: 10 !important;}
/deep/.w-e-text-container { z-index: 1 !important;}
/deep/.el-select { width: 100%;}
9.字号样式配置:
/deep/.w-e-text-container { font[size='1'] { font-size: 12px; } font[size='2'] { font-size: 14px; } font[size='3'] { font-size: 16px; } font[size='4'] { font-size: 18px; } font[size='5'] { font-size: 24px; } font[size='6'] { font-size: 32px; } font[size='7'] { font-size: 48px; }}
10.后端返回编辑器数据,部分样式处理如下:
//引用样式blockquote
{ display: block; border-left: 8px solid #d0e5f2; padding: 5px 10px; margin: 10px 0; line-height: 1.4; font-size: 100%; background-color: #f1f1f1; }
/* ul ol 样式 */ ul, ol { margin: 10px 0 10px 20px; } // --------------------------------- /* table表格样式 */ table { border-top: 1px solid #ccc; border-left: 1px solid #ccc; } table td, table th { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 3px 5px; } table th { border-bottom: 2px solid #ccc; text-align: center; }
注意事项: 我们后端用的是PHP语言,因为后端框架做了一些其他效验操作,可能导致span标签或样式不可用等,(与后端交流沟通即可!)
