wangEditor v4的简单使用

当前文档是 wangEditor v4 版本的。

wangEditor v5 已经正式发布,可参考文档。

v5 发布之后,v4 将不再开发新功能。

介绍

English documentation

wangEditor4 —— 轻量级 web 富文本编辑器,配置方便,使用简单。

  • 官网:www.wangeditor.com
  • 文档:www.wangeditor.com/v4
  • 源码:github.com/wangeditor-team/wangEditor (欢迎 star)

1:npm 安装 wangeditor

wangeditor v4 npm i wangeditor --save

基本使用:

<div id="div1"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')editor.create()
</script>

2:构建引入 wangeditor

import E from 'wangeditor'

3:创建html

<div ref="editorRef"></div>

根据 ref 设置 编辑器元素高度,实例化 wangeditor

const editorRef = ref()
editor = new E(editorRef.value)

4:配置菜单

默认情况下,显示所有菜单

 // 配置菜单栏,删减菜单,调整顺序
editor.config.menus = ['bold','head','link','italic','underline'
]
​

5:图片相关处理

5.1 上传图片限制

editor.config.uploadImgMaxLength = 3

5.2 上传图片大小限制

editor.config.uploadImgMaxSize: 10 * 1024 * 1024, // 10M

5.3 请求头的设置

uploadImgServer: props.action, // 配置 server 接口地址
uploadImgHeaders: {Authorization: `Bearer ${getPiniaToken()}`,'X-Requested-With': 'XMLHttpRequest',
},

5.4 上传请求接口

editor.config.customUploadImg = function (resultFiles, insertImgFn) {// resultFiles 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后,插入到编辑器的方法
​// 上传图片,返回结果,将图片插入到编辑器中insertImgFn(imgUrl)
}

5.5 上传前的钩子函数

editor.config.uploadImgHooks = {// 上传图片之前before: function(xhr) {console.log(xhr)
​// 可阻止图片上传return {prevent: true,msg: '需要提示给用户的错误信息'}},// 图片上传并返回了结果,图片插入已成功success: function(xhr) {console.log('success', xhr)},// 图片上传并返回了结果,但图片插入时出错了fail: function(xhr, editor, resData) {console.log('fail', resData)},// 上传图片出错,一般为 http 请求的错误error: function(xhr, editor, resData) {console.log('error', xhr, resData)},// 上传图片超时timeout: function(xhr) {console.log('timeout')},// 图片上传并返回了结果,想要自己把图片插入到编辑器中// 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式,可使用 customInsertcustomInsert: function(insertImgFn, result) {// result 即服务端返回的接口console.log('customInsert', result)
​// insertImgFn 可把图片插入到编辑器,传入图片 src ,执行函数即可insertImgFn(result.data[0])}
}

如果使用了 customUploadImg 自定义上传事件,那么 wangeditor 其他的图片上传api将会失效,例如: uploadImgServeruploadImgHeadersuploadImgHooks

以上都是修改在 editor.config,可以直接在 定义一个对象在editor.config中,看自己的需求:

6:设置是否源码模式

wangeditor 4 不支持源码模式,但可以自定义新增菜单

wangeditor 中创建 dom,按照官方文档写法如下:

  constructor(editor: E) {// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述const $elem = $(`<div class="w-e-menu" data-title="源码"><i style="font-style: normal">源码</i></div>`)super($elem, editor)}

给新增的dom菜单添加事件

// 菜单点击事件
clickHandler() {this.switchMode()this.tryChangeActive()
}

修改源码模式

enum Mode {// 源码模式Source = 'source',// 实时预览模式Live = 'live',
}

上面使用了枚举定义,也可以不需要做,看自己的使用方式

在这里判断模式状态

 this.mode = this.isSouceMode() ? Mode.Live : Mode.Source

重新设置编辑器内容

let html = this.editor.txt.html() || ''

切换为源码模式,替换内容

使用字符串replace()函数查找字符进行转换,输出为源码Html

html = html.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/ /g, '&nbsp;')

源码转换为文本内容

 html = this.editor.txt.text().replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&nbsp;/gi, ' ')

菜单激活事件,每次切换菜单的时候要调用下wangeditor 方法,否则编辑器不知道你当前菜单(扩展)有哪些

tryChangeActive() {if (this.isSouceMode()) {this.active()} else {this.unActive()}}

其他,扩展菜单可以参考文档案例:https://codepen.io/xiaokyo-the-bold/pen/ZEpWBeo

7:案例

扩展菜单class

export default class sourceMenu extends BtnMenu {mode = Mode.Live
​constructor(editor: E) {const $elem = $(`<div class="w-e-menu" data-title="源码"><i style="font-style: normal">源码</i></div>`)super($elem, editor)}
​// 菜单点击事件clickHandler() {this.switchMode()this.tryChangeActive()}tryChangeActive() {if (this.isSouceMode()) {this.active()} else {this.unActive()}}
​isSouceMode() {return this.mode === Mode.Source}
​switchMode() {this.mode = this.isSouceMode() ? Mode.Live : Mode.Sourcelet html = this.editor.txt.html() || ''if (this.isSouceMode()) {html = html.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/ /g, '&nbsp;')} else :html = this.editor.txt.text().replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&nbsp;/gi, ' ')}this.editor.txt.html(html)}
}

在页面加载时,初始化wangeditor配置

  editor.create()editor.txt.html(props.modelValue) // 初始化重新设置编辑器内容

部分代码

onMounted(() => {editor = new E(editorRef.value)// 扩展自定义【源码】菜单const sourceMenuKey = 'source'editor.menus.extend(sourceMenuKey, sourceMenu)// 配置Object.assign(editor.config, {zIndex: 1,focus: false,height: props.height,menus: [sourceMenuKey, // 源码菜单'head','bold','fontSize','fontName','italic','underline','strikeThrough','indent','lineHeight','foreColor','backColor','link','list','todo','justify','quote','emoticon','image',// 'video', // 移除视频菜单'table','code','splitLine','undo','redo',],uploadFileName: 'file',uploadImgParams: {path: props.path,},uploadImgServer: '', // 配置 server 接口地址uploadImgHeaders: {Authorization: 'token','X-Requested-With': 'XMLHttpRequest',},// 限制上传的最大图片数量uploadImgMaxLength: 2,// 单个文件的最大体积限制,默认为 10MuploadImgMaxSize: 5 * 1024 * 1024, // 5McustomUploadImg: (files: Blob[], insertImgFn: (path: string) => void) => {try {const imgData = new FormData()for (let i in files) {imgData.append(`file`, files[i])}// 请求接口,并通过   insertImgFn()函数 插入到编辑器中// imgUrl 是从接口返回的图片地址insertImgFn(imgUrl)} catch (error) {message.error('图片上传失败,请重新上传')}},
​uploadImgHooks: {customInsert: function (insertImgFn: (path: string) => void, res: Recordable) {// res即远程请求的response// insertImgFn 可把图片插入到编辑器,传入图片 src ,执行函数即可insertImgFn(res.data.path as string)},},onchange() {let sourceMenu = editor?.menus.menuList.find((item) => item.key === sourceMenuKey)emit('update:isActive', sourceMenu?.isActive)emit('update:modelValue', editor!.txt.html())},onblur() {lock = true},})editor.create()editor.txt.html(‘回显时的内容’) // 初始化重新设置编辑器内容watchEffect(() => {props.disabled ? editor?.disable() : editor?.enable()})
})
onBeforeUnmount(() => {editor!.destroy()editor = null
})

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TypeScript(十一) 类、对象

1. 类 1.1. 简介 TypeScript是面向对象的JavaScript。   类描述了所创建的对象共同的属性与方法。 1.2. 类的定义 class class_name { // 类作用域 }&#xff08;1&#xff09;定义类的关键字是class&#xff0c;后面紧跟类名&#xff0c;类可以包含以下几个模块&#xff…

PHP基础语法(上)

目录 前言 一、基础语法 1.1 标记 1.2 输出语句 1.2.1 echo 1.2.2 print 1.3 注释 1.3.1 单行注释 1.3.2 多行注释 1.4 标识符 1.5 关键字 二、数据与运算 2.1 常量 2.1.1 常量的定义和使用 2.1.2 预定义常量 2.2 变量 2.2.1 变量的赋值 2.2.2 超全局变量 2.3 数据类型 2.3.1 …

【2024美赛E题】985博士解题思路分析(持续更新中)!

【2024美赛E题】985博士解题思路分析&#xff01; 加群可以享受定制等更多服务&#xff0c;或者搜索B站&#xff1a;数模洛凌寺 联络组织企鹅&#xff1a;936670395 以下是E题老师的解题思路&#xff08;企鹅内还会随时更新文档&#xff09;&#xff1a; 2024美赛E题思路详解…

[网络安全] IIS----WEB服务器

一、 WEB服务器 WEB服务器 也叫网页服务器和 HTTP服务器使用协议: HTTP(端口:80) 或 HTTPS(端口443)浏览器:HTTP客户端网站: 一个或多个网页组成的集合 二、HTTP和HTTPS协议: HTTP : 是 HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09;的简写&#xff0c;…

【CSS】css选择器和css获取第n个元素(:nth-of-type(n)、:nth-child(n)、first-child和last-child)

:nth-of-type、:nth-child的区别 一、css选择器二、:nth-of-type、:nth-child的区别:nth-of-type(n)&#xff1a;选择器匹配属于父元素的特定类型的第N个子元素:nth-child(n)&#xff1a;选择器匹配属于其父元素的第 N 个子元素&#xff0c;不论元素的类型:first-child&#xf…

字节大佬含泪吐血总结系列之 ARP 协议详解(网络层)

字节大佬含泪吐血总结系列之 ARP 协议详解(网络层) 原文地址&#xff1a;https://github.com/Snailclimb/JavaGuide 文章目录 字节大佬含泪吐血总结系列之 ARP 协议详解(网络层)MAC 地址ARP 协议工作原理同一局域网内的 MAC 寻址不同局域网内的 MAC 寻址 每当我们学习一个新的…

帅气的性能监控平台Grafana(Windows下使用Grafana监控系统指标与GPU指标)

帅气的性能监控平台Grafana&#xff08;Windows下使用Grafana监控系统指标与GPU指标&#xff09; 前情提要 系统环境准备 windows_exporter下载 nvidia_gpu_exporter下载 prometheus下载 Grafana下载 安装指导 windows_exporter安装与nvidia_gpu_exporter安装 promethe…

vscode 如何修改c/c++格式化风格,大括号不换行

在Visual Studio Code&#xff08;VSCode&#xff09;中&#xff0c;若要修改C代码格式化的风格以实现大括号不换行&#xff0c;通常会借助于插件C/C扩展中的ClangFormat配置。以下是具体的步骤&#xff1a; 确保已安装了C/C扩展&#xff1a; 打开VSCode的扩展市场&#xff08;…

最新AI系统ChatGPT网站H5系统源码,支持Midjourney绘画局部编辑重绘,GPT语音对话+ChatFile文档对话总结+DALL-E3文生图

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持GPT…

学习笔记 | 微信小程序项目day01

今日学习内容 如何创建一个uni-app项目如何运行到微信微信开发者工具如何申请小程序appid如何配置tabBar轮播图demo 如何创建uni-app项目 使用HBuilder X 创建 如何运行到微信微信开发者工具 1、安装uni-app vue3 编译器 插件 2、安装微信开发者工具 微信开发者工具下载地址…

annoy,一个超强的 Python 库!

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个超强的 Python 库 - annoy。 Github地址&#xff1a;https://github.com/spotify/annoy 在大数据时代&#xff0c;处理高维数据集的需求越来越迫切&#xff0c;尤其是在机器学习、推荐系统和自…

JS 异常处理

1、抛出异常 throw 1.throw抛出异常信息&#xff0c;程序也会终止执行 2.throw后面跟的是错误提示信息 3.Error对象配合 throw使用&#xff0c;能够设置更详细的错误信息 示例 function fn(x, y) {if (!x || !y) {throw new Error(没有参数传进来) }return x y } fn()打印结果…

基于LlamaIndex解决RAG的关键痛点

受到 Barnett 等人的论文《Seven Failure Points When Engineering a Retrieval Augmented Generation System》的启发&#xff0c;本文将探讨论文中提到的七个痛点&#xff0c;以及在开发检索增强型生成&#xff08;RAG&#xff09;流程中常见的五个额外痛点。更为关键的是&am…

Camera2+OpenGL ES+MediaCodec+AudioRecord实现录制音视频写入H264 SEI数据

记录一下学习过程&#xff0c;得到一个需求是基于Camera2OpenGL ESMediaCodecAudioRecord实现录制音视频。 需求&#xff1a; 在每一帧视频数据中&#xff0c;写入SEI额外数据&#xff0c;方便后期解码时获得每一帧中的自定义数据。点击录制功能后&#xff0c;录制的是前N秒至…

AI实践于学习3_大模型之AI解题提示词优化实践

前言 提示词只是让LLM具有一定的推理能力&#xff0c;并不能直接提高模型能力&#xff0c;可以借助CoT思维链、提示词规则一定程度微调模型。 尽量使用新模型&#xff0c;通用性能更好&#xff0c;支持提示词规则更多。 参考 https://www.rgznbk.com/archives/Prompt-Engin…

海外社媒营销平台及运营规则,如何降低封号率?

社交媒体已经成为人们生活和日常习惯不可或缺的一部分&#xff0c;在跨境电商出海过程中&#xff0c;海外社媒营销平台可以起到非凡的助力&#xff1b;而平台的选择以及平台的运营技巧、规则都各有不同。很多海外社媒工作者经常会被封号&#xff0c;这也是难度之一&#xff0c;…

2024美赛数学建模C题思路分析 - 网球的动量

1 赛题 问题C&#xff1a;网球的动量 在2023年温布尔登绅士队的决赛中&#xff0c;20岁的西班牙新星卡洛斯阿尔卡拉兹击败了36岁的诺瓦克德约科维奇。这是德约科维奇自2013年以来首次在温布尔登公开赛失利&#xff0c;并结束了他在大满贯赛事中历史上最伟大的球员之一的非凡表…

2024美赛C题完整解题教程 网球运动势头(持续更新)

2024美赛已经于今天早上6点准时公布题目。本次美赛将全程跟大家一起战斗冲刺O奖&#xff01;思路持续更新。 2024 MCM Problem C: Momentum in Tennis &#xff08;网球运动的势头&#xff09; 注&#xff1a;在网球运动中&#xff0c;"势头"通常指的是比赛中因一系…

为客户解决痛点,电子纸增加制表功能

为客户解决痛点&#xff0c;电子纸增加制表功能 部分客户购买我们的电子纸后反馈效果很好&#xff0c;但是在配套组态软件制作电子纸模板时&#xff0c;遇到需要制作表格的时候比较麻烦。像是在画板作画一样&#xff0c;比较费时&#xff0c;而且效果不是很好&#xff0c;没办…

机器学习算法决策树

决策树的介绍 决策树是一种常见的分类模型&#xff0c;在金融风控、医疗辅助诊断等诸多行业具有较为广泛的应用。决策树的核心思想是基于树结构对数据进行划分&#xff0c;这种思想是人类处理问题时的本能方法。例如在婚恋市场中&#xff0c;女方通常会先询问男方是否有房产&a…