富文本编辑器 wangeditor 的使用

富文本编辑器 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)breakdefault: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 或者 imagecontent: [{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() 无效，因为返回的是一个标签元素

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/352043.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

tinymce富文本编辑器的使用

tinymce富文本编辑器的使用

tinymce富文本编辑器的使用 1、基本介绍 tinymce富文本官网&#xff1a;https://www.tiny.cloud/ 中文文档&#xff1a;http://tinymce.ax-z.cn/ tinymce-npm地址&#xff1a;https://www.npmjs.com/package/tinymce tinymce英文文档-示例地址&#xff1a;https://www.tin…
阅读更多...
vim 文本编辑器

vim 文本编辑器

4.2 vim文本编辑器 4.2.1 简介 vim是vi的升级版,最常见的区别是能用多种颜色显示显示系统文件的一些特殊信息。 vi: Visual Interface 文本编辑器,可视化接口vim&#xff1a;vi iMproved的缩写&#xff0c;即vi的增强版 vim编辑器分为三种主要模式&#xff1a; 命令模式&am…
阅读更多...
超级好用的TXT分本分割工具

超级好用的TXT分本分割工具

百度网盘&#xff1a;https://pan.baidu.com/s/1ry-LCLpgwTghXWbL8q7bnQ
阅读更多...
python分割文本_python分割文本

python分割文本_python分割文本

广告关闭 腾讯云11.11云上盛惠 ，精选热门产品助力上云，云服务器首年88元起，买的越多返的越多，最高返5000元！ break f.write(data) print(fid,#,end=.) fid+=1... 我有一个文本文件。 我需要得到一个句子列表。 这如何实现？ 有很多微妙的东西，比如点用在缩写中。 我的…
阅读更多...
java手写-txt大文本分割

java手写-txt大文本分割

一、txt文本切割代码 场景&#xff1a;公司项目txt日志文件太大&#xff0c;用notepad看起来太卡了&#xff0c;公司禁用网盘也没法下载&#xff0c;自己空闲了写一个吧&#xff0c;复习一下输入出入流。 先给代码成品吧&#xff1a; 就是这么简单&#xff0c;几行代码就可以…
阅读更多...
C#版TXT文本分割器

C#版TXT文本分割器

哈&#xff01;老师实验要求要做文件分割器的&#xff0c;这里先做个demo出来和大家分享下。 这是实验要求&#xff1a;1. 能进行文件分割 2. 分割块大小由用户输入决定 3. 能进行文件合并 …
阅读更多...
C#txt文本分割器

C#txt文本分割器

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;//openfiledialog using System.IO;//文本处理namespace CutTxt {public parti…
阅读更多...
一文带你了解MySQL之事务隔离级别和MVCC

一文带你了解MySQL之事务隔离级别和MVCC

目录 一、数据准备二、事务隔离级别2.1 事务并发执行遇到的问题2.2 SQL标准中的四种隔离级别2.3 MySQL中支持的四种隔离级别 三、MVCC3.1 版本链3.2 ReadView3.2.1 READ COMMITTED3.2.2 REPEATABLE READ 3.3 MVCC小结 四、关于purge五、总结 一、数据准备 为了我们学习的顺利进…
阅读更多...
从FC到Wii 24年来游戏机CPU发展历程回顾

从FC到Wii 24年来游戏机CPU发展历程回顾

作者&#xff1a;吴愧 从小学开始&#xff0c;游戏机就伴随着我走过一段快乐、辛酸的历程。宁愿早上饿肚子&#xff0c;也要省吃减用存钱买游戏卡&#xff0c;或者添钱换卡玩。好不容易有钱买到新的游戏卡&#xff0c;高兴得乐翻天&#xff0c;玩到饭都能都忘记吃。对于家里那些…
阅读更多...
MotioninJoy安装教程-版本0.6.0003

MotioninJoy安装教程-版本0.6.0003

摘要: SONY的PS3游戏主机配置的DS3(DUALSHOCK 3)手柄质量手感都不错&#xff0c;特别是喜欢PS系手柄玩实况足球的玩家来说就是不二的选择。DUALSHOCK 3本身包括蓝牙无线和USB有线的通信方式&#xff0c;但是都不是标准的数据格式&#xff0c;所以在电脑系 ... SONY的PS3游戏主机…
阅读更多...
感叹游戏行业的飞速发展

感叹游戏行业的飞速发展

现在的游戏大作层出不穷&#xff0c;玩着这些3A大作&#xff0c;有时候不禁让我想起小时候玩小霸王游戏机的时光&#xff0c;虽然小霸王游戏是抄袭任天堂的红白机&#xff0c;但确实给国内的孩子们带来了无限的乐趣。那个时候一起玩耍的小伙伴们&#xff0c;都会要求父母给自己…
阅读更多...
G502使用计算机配置,罗技g502dpi设置配置文件 | 手游网游页游攻略大全

G502使用计算机配置,罗技g502dpi设置配置文件 | 手游网游页游攻略大全

发布时间&#xff1a;2016-06-27 我是用罗技力反馈EX 以下是设置截图 [不知道是不是游戏有BUG,我的方向盘始终没有出现自然震动.但是一按手刹车就会震动个不停] 第一步: 请在罗技驱动方向盘驱动程序下,选择双轴 [也就是图中的组合那里不要打勾,要不然 ... 标签&#xff1a; 攻…
阅读更多...
推荐一个ps3的六轴手柄在windows下的驱动

推荐一个ps3的六轴手柄在windows下的驱动

和Xbox360手柄的适配器和电池盒需要另外购买比起来&#xff0c;PS3手柄比较厚道&#xff0c;基本上是一次性到位&#xff08;蓝牙适配器的价格就几乎忽略不计了&#xff09;&#xff0c;但PS3手柄在Windows下却没有官方的驱动&#xff0c;导致无法发挥其强悍的功能&#xff0c;…
阅读更多...
DirectInput手柄在Windows环境下震动实现

DirectInput手柄在Windows环境下震动实现

DirectInput手柄Windows环境下震动实现 背景1.direcrInput手柄震动控制1.1运行环境1.2代码实现 2 模拟XInput设备&#xff0c;通过XInput实现2.1 x360ce设置 2.2 XInput 代码实现2.3 x360ce分析 背景 近期项目里面有个需求&#xff0c;需要在控制终端上安装摇杆&#xff0c;且…
阅读更多...
虚幻4UE4使用PS4 DualShock4手柄ProController Switch手柄

虚幻4UE4使用PS4 DualShock4手柄ProController Switch手柄

虚幻4UE4使用PS4 DualShock4手柄ProController Switch手柄 使用虚幻引擎绑定输入操作可参考我的另一篇文章。虚幻4 UE4 绑定按键操作及切换视角-CSDN博客 使用虚幻引擎开发经常会碰到使用手柄或其他输入设备进行输入的情况&#xff0c;虽然在引擎->输入中有游戏手柄的各种…
阅读更多...
Maven 打包插件 maven-jar-plugin

Maven 打包插件 maven-jar-plugin

文章目录 指定版本生成可执行 Jar准备依赖&#xff0c;并指定依赖位置自动下载依赖的 Jar 文件 打包时排除文件与其他常用打包插件比较 本文是对 maven-jar-plugin 常用配置的介绍&#xff0c;更详细的学习请参照 Apache Maven JAR Plugin 官方文档 这是 maven 生命周期 packa…
阅读更多...
Linux系统中使用Xbox360手柄

Linux系统中使用Xbox360手柄

最近一个项目中需要用到Xbox360游戏手柄&#xff0c;硬件平台为周立功A7开发板&#xff0c;EPC-6G2C-L&#xff0c;折腾半天&#xff0c;终于弄好了&#xff1b; 正常电脑Ubuntu系统是自带手柄驱动的&#xff0c;将手柄插上电脑USB接口&#xff0c;将自动出现设备接口文件&…
阅读更多...
dll修复都有哪些方法？详细解析各种dll修复方法

dll修复都有哪些方法？详细解析各种dll修复方法

DLL&#xff08;动态链接库&#xff09;是 Windows 操作系统中的一种重要文件&#xff0c;它包含了许多程序所需的函数和资源。因此&#xff0c;当 DLL 文件出现问题时&#xff0c;可能会导致程序无法正常运行&#xff0c;甚至整个系统崩溃。这时候需要使用 DLL 修复工具进行修…
阅读更多...
ROS：常用可视化工具的使用

ROS：常用可视化工具的使用

目录 一、日志输出工具——rqt_console二、绘制数据曲线——rqt_plot三、图像渲染工具——rqt_image_view四、图形界面总接口——rqt五、Rviz六、Gazebo 一、日志输出工具——rqt_console 启动海龟键盘控制节点&#xff0c;打开日志输出工具 roscorerosrun turtlesim turtles…
阅读更多...
linux版drastic模拟器设置,DraStic nds模拟器下载安装及使用图文教程

linux版drastic模拟器设置,DraStic nds模拟器下载安装及使用图文教程

近日&#xff0c;曾便携过PSP用GBA模拟器的开发者Exophase发布了一款安卓用的NDS模拟器《DraStic》&#xff0c;DraStic曾是Exophase为开源掌机潘多拉编写的一款功能强大的NDS模拟器&#xff0c;现在移植到了Android。 你会在下载到的Download文件夹内发现三个文件&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023