富文本编辑器 wangeditor 的使用

  1. 为什么选择使用 wangeditor
    a. 轻量、简洁、界面美观、文档齐全、易用、开源免费、开源团队维护、有专业Q群答疑、持续更新、无需使用其他库。插件功能基本符合我们目前的业务需求
    b. 相比较于TinyMCE一类的编辑器，中文文档入门简单，节约了学习的时间成本
    c. 相比较于KindEditor一类的编辑器，界面更加美观，文档更易阅读。KindEditor默认的快捷键功能按钮更多；但是图片上传分为了单图片和多图片上传两类，不如wangeditor便捷；使用了jquery的语法
    d. 相比较于ueditor一类的编辑器，开源团队维护，仍在持续更新，有相对应的Q群可解疑
    e. wangeditor可以自定义扩展菜单；直接复制文本内容，可选择保留或删除样式、图片；文本格式进行操纵

2.安装

npm i wangeditor --save

3.引入使用

import E from 'wangeditor'
const editor = new E("节点标签")  //绑定节点
editor.create()  //富文本被创建后，文本是默认居中显示的。而 wangeditor 也没有文本对齐相关的配置项，所以要改变初始文本的显示位置只有通过 css 样式改变
  1. 常用设置（以下所有没有特别标注的都是需要放置在 create 方法之前的）
    a. 设置编辑区域高度
  editor.config.height = 400  //默认高度为 300，设置高度时不需要添加单位

b. 分离菜单栏和编辑区域

const editor = new E("菜单栏节点标签", "编辑区域节点标签")  //在绑定节点时需要绑定两个节点标签，同时也需要给两个绑定的标签重新添加样式，不然就会没有外框显示

在这里插入图片描述

在这里插入图片描述

c. 同时存在多个编辑器(每个编辑器设置自己的节点标签并创建，互不干扰)

const editor1 = new E("第一个节点标签")
editor1.create()
const editor2 = new E("第二个节点标签")
editor2.create()

d.配置 z-index（默认为1000）

editor.config.zIndex = 100

e. 修改默认提示文字

editor.config.placeholder = '自定义 placeholder 文字'  //当设置为空时，可以清除提示文字

f.自动聚焦（编辑器初始化时，是默认聚焦到编辑区域的）

  editor.config.focus = false  //可以取消自动聚焦

g.自定义 alert（默认使用浏览器自带alert）

 import { message } from 'ant-design-vue' //如要用到 ant 组件，则还需在 main.js 里引入样式文件
 editor.config.customAlert = function(s, t){
	switch(t) {
		case 'success':
			message.success(s)
			break
		default:
			message.error(s)
			break
	}
 }
 editor.config.customAlert('成功了', 'success')
 editor.config.customAlert('什么都没有')

h. 内容处理
ⅰ. 设置内容
1. 在绑定的标签节点内添加 html 内容
2. 也可以给绑定的标签节点添加属性 v-html 设置编辑器内容
3. 通过 editor.txt.html(‘html 内容’) 来设置编辑器内容（需要设置在 create 之后或事件中才能生效）
4. 优先级：3 > 2 > 1
5. 使用 editor.txt.append(‘追加的 html 内容’) 来向编辑器中追加内容，如果编辑器中本来存在内容的话，会在其后显示（需要设置在 create 之后或事件中才能生效）
ⅱ. 获取 html（任何地方均可使用）
editor.txt.html()
ⅱi. 获取文本内容（任何地方均可使用）
editor.txt.text()
ⅳ. JSON 内容格式
1. 通过 editor.txt.getJSON() 来获取 JSON 格式的编辑器内容（该方法需要放置在 create 之后，或者放置在事件中）
2. 通过 editor.txt.setJSON([]) 来设置 JSON 格式的编辑器内容（该方法需要放置在 create 之后，或者放置在事件中，同时 JSON 格式内容有严格要求）

      setJSON([
		{
			tag: '标签',
			children: ['子内容'],
			attrs: [
				{
					name: '标签对应 name 属性',
					value: 'name 属性对应值'
				}
			]
		}
	 ])

清空编辑器内容（需要设置在 create 之后或事件中才能生效）

editor.txt.clear()

配置历史记录

editor.config.compatibleMode = function() {
	return true
 }  //配置历史记录模式，true 为兼容模式（IE和旧版Edge），false 为标准模式（主流浏览器）
 editor.config.onchangeTimeout = 500  //兼容模式时，自定义记录的频率
 editor.config.historyMaxSize = 10  //自定义历史记录的步数，在该范围内可以使用 ctrl+z/ctrl+shift+z 或菜单栏中的撤销/恢复按钮 来撤销/恢复操作

i. 配置项
ⅰ. 自定义菜单

editor.config.menus = ['bold', 'head', 'link']  //自定义菜单栏显示的菜单及顺序
editor.config.excludeMenus = ['emoticon', 'video']  //自定义剔除不需要的菜单功能
所有菜单：[
	'head',  // 标题
	'bold',  // 粗体
	'fontSize',  //字号
	'fontName',  //字体
	'italic',  // 斜体
	'underline',  //下划线
	'strikeThrough',  //删除线
	'indent',  //缩进
	'lineHeight',  //行高
	'foreColor',  //文字颜色
	'backColor',  //文字背景颜色
	'link',  //链接，插入一个链接地址，如果填写了描述，则高亮显示描述。若没有，则高亮显示链接
	'list',  // 序列（有序列表、无序列表）
	'todo',  //待办事项
	'justify',  // 对齐方式
	'quote',  //引用
	'emoticon',  //表情
	'image',  //插入图片
	'video',  //插入视频
	'table',  //表格
	'code',  //代码
	'splitLine',  //分割线
	'undo',  //撤销
	'redo' //恢复
 ]

ⅱ. 配置颜色（自定义菜单栏中文字颜色、背景颜色的可用颜色）

editor.config.colors = ['#000', '#eee']

ⅲ. 配置可用字体形式

editor.config.fontNames = [
	{
		name: '显示的字体文案名',
		value: '规范字体名'
	},
	'规范字体名'
]

ⅳ. 配置可用字号

editor.config.fontSizes = {
	'x-small': { name: '10px', value: '1' } //此外还有 'small', 'normal', 'large', 'x-large', 'xx-large', 'xxx-large'
}

ⅴ. 配置可用行高

editor.config.lineHeights = ['1', '1.15', '1.2']

ⅵ. 配置可用表情图标

editor.config.emotions = [
	{
		title: 'tab 标题',
		type: 'image',  //展现形式，只有 emoji 或者 image
		content: [
			{
				alt: '表情说明', src: '地址'
			}
		]  //content 可以用其他表示方法，但是需要是数组
	},
	{
		title: 'tab 标题',
		type: 'emoji',
		content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐'.split(/\s/),
	}
]

ⅶ. 配置全屏功能

editor.config.showFullScreen = false  //取消展示全屏功能
editor.fullScreen()  //全屏
editor.unFullScreen()  //取消全屏

ⅷ. 配置菜单栏的提示显示

editor.config.showMenuTooltips = false  //隐藏菜单栏提示
editor.config.menuTooltipPosition = '方向'  //设置菜单栏提示方向  up（上标）、down（下标）
  1. 粘贴过滤(不适用于 IE11)
    a. 关闭粘贴样式的过滤（编辑器会默认过滤掉粘贴文本的样式）
editor.config.pasteFilterStyle = false

b. 忽略粘贴内容中的图片

editor.config.pasteIgnoreImg = true

c. 自定义处理粘贴的文本内容（调用此方法，没有return的话粘贴的内容会被阻止）

editor.config.pasteTextHandle = function(pasteStr) {}  //pasteStr 表示粘贴的文本内容
  1. 常用 API
editor.id  //编辑器唯一的 id
editor.config  //编辑器的所有配置（默认的配置和设置的配置）
editor.$textElem.elems[0]  //编辑区域 DOM 节点
editor.textElemId  //编辑区域元素 id
editor.$toolbarElem.elems[0]  //菜单栏 DOM 节点
editor.toolbarElemId  //菜单栏元素 id
<!-- 以下5个API需要在onSelectionChange事件中触发 -->
editor.selection.getSelectionText()  //选中的文字
editor.selection.getSelectionContainerElem().elems[0]  //选区所在的 DOM 节点
editor.selection.getSelectionStartElem().elems[0]  //选区开始的 DOM 节点
editor.selection.getSelectionEndElem().elems[0]  //选区结束的 DOM 节点

editor.selection.collapseRange(toStart)  //折叠选区，toStart默认为false，表示结束位置（即光标定位在原选区的最末尾处），true表示开始位置（即光标定位在原选区的最开始处）
editor.selection.isSelectionEmpty()  //判断选区是否为“空”，没有选中任何文字(即没有进行选区操作，通常与onchange事件搭配)
editor.cmd.do('insertHTML', value)  //在光标位置插入文字（需放在create之后或事件之中）
editor.disable()  //禁用编辑器，只能放置在 create 之后或事件中才能生效
editor.enable()  //解禁编辑器
editor.destroy()  //销毁编辑器
editor.config.onCatalogChange = function(headList) {}  //此方法可以获取编辑器内的所有标题，headList 返回 list 格式的对象，对象包含 id、tag、text
editor.scrollToHead(headId)  //滚动到某个标题，headId 为上个方法中获取到的 id
  1. 常用方法
    a. onchange
editor.config.onchange = function(newHtml) {}  //newHtml 是编辑框内容发生改变后得到的最新的 html
editor.config.onchangeTimeout = 500  //配置触发 onchange 的时间频率，默认为 200ms

b. onSelectionChange：用户选区操作（鼠标选中文字，ctrl+a全选等）会自动触发

editor.config.onSelectionChange = function(newSelection) {}  //newSelection 是一个对象，包含 text（当前选择文本）、html（当前选中的 html）、selection（原生 selection 对象）

c. onfocus 和 onblur：聚焦和失焦时自动触发，获得的参数都是最新的 html 内容

editor.config.onfocus = function(newHtml) {}
editor.config.onblur = function(newHtml) {}

d. linkImgCallback：插入网络图片的回调事件

editor.config.linkImgCallback = function(src, alt, href) {}  //src：图片的路径地址，alt：图片文字说明，href：点击图片跳转的链接地址；此三个参数都是上传网络图片时需要的参数，只有 src 为必传
editor.config.linkImgCheck = function(src, alt, href) {}  //该方法是对插入网络图片的校验，参数同上。返回 true 代表通过；返回字符串会阻止并 alert 错误信息；返回 undefined 没有任何返回

e. onlineVideoCallback：自定义检查插入网络视频后的回调

editor.config.onlineVideoCallback = function(video) {}  //video 返回一个含有视频地址的完整 iframe 标签（即上传视频时的参数）
editor.config.onlineVideoCheck = function(video) {}  //该方法是对插入网络视频的校验，参数同上。返回 true 代表通过；返回字符串会阻止并 alert 错误信息；返回 undefined 没有任何返回

f. linkCheck：自定义检查插入的链接

editor.config.linkCheck = function(text, link) {}  //text：链接说明文字；link：链接地址
  1. 图片上传
    a. 配置服务端接口（服务端接口需返回 application/json 格式）
editor.config.uploadImgServer = '/upload'

b. 限制图片大小和类型

editor.config.uploadImgMaxSize = 2 * 1024 * 1024  //默认限制为 5M
editor.config.uploadImgAccept = ['jpg', 'jpeg']  //默认限制为 ['jpg', 'jpeg', 'png', 'gif', 'bmp']，设置为空数组时表示不限制

c. 限制一次最多上传几张图片

editor.config.uploadImgMaxLength = 5

d. 自定义上传参数（参数会被添加到 formData 中一起上传到服务端）

editor.config.uploadImgParams = {
	token: 'xxx',
	x: 100
 }
editor.config.uploadImgParamsWithUrl = true  //当需要将参数拼接到 url 中时

e. 自定义使用 formData.append(name, file） 添加图片文件时，第一个参数名

editor.config.uploadFileName = 'file'

f. 自定义上传图片时添加 http 请求的 header

editor.config.uploadImgHeaders = {
	Accept: 'text/x-json',
	a: 100
}

g. 跨域传递 cookie

editor.config.withCredentials = true

h. 自定义上传接口等待的最大时间，默认为 10 秒钟

editor.config.uploadImgTimeout = 5 * 1000

i. 默认上传图片的处理函数

editor.config.uploadImgHooks = {
	before: function(xhr) {}  //上传图片之前，可以通过返回 return { prevent: true, message: '错误提示' } 阻止图片上传，一旦返回此对象，不管循环多深，都会最后执行
	success: function(xhr) {}  //图片上传并返回了结果，图片插入已成功
	fail: function(xhr, editor, resData) {}  //图片上传并返回了结果，但图片插入时出错了
	error: function(xhr, editor, resData) {}  //图片上传出错，一般为 http 请求的错误
	timeout: function(xhr) {}  //图片上传超时
	customInsert: function(insertImgFn, result) {}  //图片上传并返回了结果，想要自己把图片插入到编辑器中，通过 insertImgFn(result.data[0]) 插入
}  //当设置了服务端接口，且接口不支持同时上传多张图片时，此方法不再适用，需要自己重新实现上传图片功能

j. 自己实现上传图片

editor.config.customUploadImg = function(resultFiles, insertImgFn) {}  //resultFiles 表示上传的所有图片的文件说明，可以循环并使用 insertImgFn 实现图片的插入

k. 使用 base64 保存图片（不能与 uploadImgServer 功能同时使用）

editor.config.uploadImgShowBase64 = true

l. 设置网络图片的 alt 和跳转链接显示

editor.config.showLinkImgAlt = false
editor.config.showLinkImgHref = false

m. 隐藏插入网络图片的功能，只保留本地上传图片

editor.config.showLinkImg = false
  1. 视频上传与图片上传功能相同（只需要把其中的 Img 改为 Video 即可）
  2. 特殊的情况
    a. 火狐浏览器下，通过 editor.txt.html() 获取到的编辑器的 html 的结束标签前面会有一个换行标签

    b. 浏览器中，编辑器中的空格内容会被编译成  ，需要对空格做特殊处理：replace(/ /gi, ‘’)
    c. 对 editor.txt.html() 获取到的 html 内容使用 trim() 无效，因为返回的是一个标签元素
# 前端框架 # vue.js # npm
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue