当前位置：首页 > news >正文

wangeditor——cdn引入的形式创建一个简易版编辑器——js技能提升

news 2026/2/7 15:49:39

昨天同事那边有个需求，就是要实现聊天功能，需要用到一个富文本编辑器，参考如下：
在这里插入图片描述
上面的这个效果图是博客园的评论输入框

最终使用wangEditor编辑器实现的效果如下：

在这里插入图片描述
只保留了个别的菜单：

默认模式的wangEditor编辑器如下：
在这里插入图片描述
下面直接上代码：

解决步骤1：cdn引入

head头部标签引入css

<linkhref="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"rel="stylesheet"/>

script引入js

 <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

解决步骤2：其余css配置

<style>#editor—wrapper {border: 1px solid #ccc;z-index: 100; /* 按需定义 */}#toolbar-container {border-bottom: 1px solid #ccc;}#editor-container {height: 500px;}</style>

解决步骤3：html代码

 <div id="editor-content-textarea"></div><button id="btn-set-html">设置html</button><div id="editor—wrapper" style="width: 900px"><div id="toolbar-container"><!-- 工具栏 --></div><div id="editor-container"><!-- 编辑器 --></div></div>

解决步骤4：script代码

<script>const { createEditor, createToolbar } = window.wangEditor;const editorConfig = {placeholder: '请输入内容...',// maxLength:2000,//设置最大长度MENU_CONF: {},onChange(editor) {const html = editor.getHtml();console.log('editor content', html);// 也可以同步到 <textarea>},};const editor = createEditor({selector: '#editor-container',html: '<p><br></p>',config: editorConfig,mode: 'simple', // or 'simple'});const toolbarConfig = {excludeKeys: ['blockquote','bgColor',// 'headerSelect','italic','group-more-style', // 排除菜单组，写菜单组 key 的值即可'bulletedList', //无序列表'numberedList', //有序列表'todo', //待办'emotion', //表情'insertTable', //表格'codeBlock', //代码块'group-video', //视频'divider', //分割线'fullScreen', //全屏// 'insertLink',//插入链接'group-justify', //对齐方式'group-indent', //缩进'fontSize', //字体大小'fontFamily', //字体'lineHeight', //行高'underline', //下划线'color', //颜色'undo', //撤销'redo', //重做],};toolbarConfig.modalAppendToBody = true;// 创建 toolbar 和 editor// 可监听 `modalOrPanelShow` 和 `modalOrPanelHide` 自定义事件来设置样式、蒙层editor.on('modalOrPanelShow', (modalOrPanel) => {if (modalOrPanel.type !== 'modal') return;const { $elem } = modalOrPanel; // modal element// 设置 modal 样式（定位、z-index）// 显示蒙层});editor.on('modalOrPanelHide', () => {// 隐藏蒙层});const toolbar = createToolbar({editor,selector: '#toolbar-container',config: toolbarConfig,mode: 'default', // or 'simple'});editorConfig.MENU_CONF['uploadImage'] = {server: '/api/upload-image',fieldName: 'custom-field-name',// 继续写其他配置...customInsert(res, insertFn) {console.log(res);// JS 语法// res 即服务端的返回结果// 从 res 中找到 url alt href ，然后插入图片//   "url": "xxx", // 图片 src ，必须// "alt": "yyy", // 图片描述文字，非必须// "href": "zzz" // 图片的链接，非必须insertFn(url, alt, href);},//【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置};
});

如果要实现回显，则需要通过下面的代码

// textarea 初始化值const textarea = document.getElementById('editor-content-textarea');textarea.value ='<p>wangEditor 只识别 editor.getHtml() 生成的 html 格式，不可以随意自定义 html 代码（html 格式太灵活了，不会全部兼容）</p>\n<p>wangEditor can only understand the HTML format from editor.getHtml() , but not all HTML formats.</p>\n<p><br></p>';// Set HTMLdocument.getElementById('btn-set-html').addEventListener('click', () => {if (editor.isDisabled()) editor.enable();if (!editor.isFocused()) editor.focus();editor.select([]);editor.deleteFragment();window.wangEditor.SlateTransforms.setNodes(editor,{ type: 'paragraph' },{ mode: 'highest' });editor.dangerouslyInsertHtml(textarea.value);

完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title>富文本编辑器</title><linkhref="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"rel="stylesheet"/><style>#editor—wrapper {border: 1px solid #ccc;z-index: 100; /* 按需定义 */}#toolbar-container {border-bottom: 1px solid #ccc;}#editor-container {height: 500px;}</style></head><body><div id="editor-content-textarea"></div><button id="btn-set-html">设置html</button><div id="editor—wrapper" style="width: 900px"><div id="toolbar-container"><!-- 工具栏 --></div><div id="editor-container"><!-- 编辑器 --></div></div><script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script><script>const { createEditor, createToolbar } = window.wangEditor;const editorConfig = {placeholder: '请输入内容...',// maxLength:2000,//设置最大长度MENU_CONF: {},onChange(editor) {const html = editor.getHtml();console.log('editor content', html);// 也可以同步到 <textarea>},};const editor = createEditor({selector: '#editor-container',html: '<p><br></p>',config: editorConfig,mode: 'simple', // or 'simple'});const toolbarConfig = {excludeKeys: ['blockquote','bgColor',// 'headerSelect','italic','group-more-style', // 排除菜单组，写菜单组 key 的值即可'bulletedList', //无序列表'numberedList', //有序列表'todo', //待办'emotion', //表情'insertTable', //表格'codeBlock', //代码块'group-video', //视频'divider', //分割线'fullScreen', //全屏// 'insertLink',//插入链接'group-justify', //对齐方式'group-indent', //缩进'fontSize', //字体大小'fontFamily', //字体'lineHeight', //行高'underline', //下划线'color', //颜色'undo', //撤销'redo', //重做],};toolbarConfig.modalAppendToBody = true;// 创建 toolbar 和 editor// 可监听 `modalOrPanelShow` 和 `modalOrPanelHide` 自定义事件来设置样式、蒙层editor.on('modalOrPanelShow', (modalOrPanel) => {if (modalOrPanel.type !== 'modal') return;const { $elem } = modalOrPanel; // modal element// 设置 modal 样式（定位、z-index）// 显示蒙层});editor.on('modalOrPanelHide', () => {// 隐藏蒙层});const toolbar = createToolbar({editor,selector: '#toolbar-container',config: toolbarConfig,mode: 'default', // or 'simple'});editorConfig.MENU_CONF['uploadImage'] = {server: '/api/upload-image',fieldName: 'custom-field-name',// 继续写其他配置...customInsert(res, insertFn) {console.log(res);// JS 语法// res 即服务端的返回结果// 从 res 中找到 url alt href ，然后插入图片//   "url": "xxx", // 图片 src ，必须// "alt": "yyy", // 图片描述文字，非必须// "href": "zzz" // 图片的链接，非必须insertFn(url, alt, href);},//【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置};// textarea 初始化值const textarea = document.getElementById('editor-content-textarea');textarea.value ='<p>wangEditor 只识别 editor.getHtml() 生成的 html 格式，不可以随意自定义 html 代码（html 格式太灵活了，不会全部兼容）</p>\n<p>wangEditor can only understand the HTML format from editor.getHtml() , but not all HTML formats.</p>\n<p><br></p>';// Set HTMLdocument.getElementById('btn-set-html').addEventListener('click', () => {if (editor.isDisabled()) editor.enable();if (!editor.isFocused()) editor.focus();editor.select([]);editor.deleteFragment();window.wangEditor.SlateTransforms.setNodes(editor,{ type: 'paragraph' },{ mode: 'highest' });editor.dangerouslyInsertHtml(textarea.value);});</script></body>
</html>

wangeditor——cdn引入的形式创建一个简易版编辑器——js技能提升

昨天同事那边有个需求，就是要实现聊天功能，需要用到一个富文本编辑器，参考如下： 上面的这个效果图是博客园的评论输入框最终使用wangEditor编辑器实现的效果如下： 只保留了个别的菜单： 默认模式的wangE…...

编程日记 2024/9/12 10:28:28

9.11.

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget), speecher(new QTextToSpeech(this)) {//设置时钟ui->setupUi(this);startTimer(1000);//文本框label居中对齐ui->label_2->setAlignment(Qt::AlignCenter);connect(this,&Widget::my_sign…...

编程日记 2024/9/12 10:27:27

【GeekBand】C++设计模式笔记1_介绍

课程目标理解松耦合设计思想掌握面向对象设计原则掌握重构技法改善设计掌握GOF核心设计模式什么是设计模式目标：复用，以不变应万变 GOF设计模式从面向对象谈起深入理解面向对象向下：深入理解三大面向对象机制封装：隐藏…...

编程日记 2024/9/12 10:24:24

MySQL 数据库：原理、应用与发展

摘要：本文深入探讨了 MySQL 数据库相关内容。首先介绍了 MySQL 作为开源关系型数据库管理系统的显著特点，包括易用性、跨平台性、高性能、可扩展性、开源免费以及数据安全性等方面。接着详细阐述了其安装与配置过程，涵盖在不同操作系统上的安…...

编程日记 2024/9/12 10:23:23

7.2图像旋转

实验原理在OpenCV中，图像旋转也是一种常见的几何变换，它可以用来调整图像的方向。图像旋转通常涉及绕着图像中心点旋转一定角度的操作。与图像平移类似，旋转也可以通过仿射变换来实现，但是旋转需要使用到旋转矩阵来定义旋转的角…...

编程日记 2024/9/12 10:22:21

学学vue-2

1.7 指令修饰符 keyup.enter：监听键盘回车事件，回车触发事件keyup.enter代码 v-model修饰符： v-model.trim：去首尾空格v-model.number：变数字（如果是数字的话，转变为数字） 事件名.…...

编程日记 2024/9/12 10:15:13

什么是 Grafana？

什么是 Grafana？ Grafana 是一个功能强大的开源平台，用于创建、查看、查询和分析来自多个来源的数据。通过可视化仪表盘（Dashboard），它能够帮助用户监控实时数据、生成历史报告，甚至进行预测分析。Grafana…...

编程日记 2024/9/12 10:13:11

【Prompt Engineering：思维树 (ToT)、检索增强生成 (RAG)、自动推理并使用工具 (ART)】

思维树 (ToT) 对于需要探索或预判战略的复杂任务来说，传统或简单的提示技巧是不够的。最近，Yao et el. (2023)(opens in a new tab) 提出了思维树（Tree of Thoughts，ToT）框架，该框架基于思维链提示进行了总…...

编程日记 2024/9/12 10:12:10

【习题】应用/元服务上架

判断题 1. 一个完整的发布软件包必须包含一个Profile文件。 A、正确(True) B、错误(False) 2. 编译打包的软件包存放在项目目录build > outputs > default下。 A、正确(True) B、错误(False) 单选题 1. 创建应用时，应用包名需要和在DevEco …...

编程日记 2024/9/12 10:11:09

性能测试的复习3-jmeter的断言、参数化、提取器

一、断言、参数化、提取器需求： 提取查天气获取城市名请求的响应结果：城市对查天气获取城市名的响应结果进行响应断言和json断言对查天气获取城市名添加用户参数 1、步骤查看天气获取城市名 json提取器（对响应结果提取、另一个接口请求…...

编程日记 2024/9/12 10:10:07

ORB-SLAM2关键点总结

1.ORB-SLAM2的总体框架是怎样的 ORB-SLAM2一共有三个线程，分别是Tracking、Local Mapping、Loop Closing线程，，其中Tracking负责完成关键点提取，并进行帧间匹配，同时初步选取关键帧；Local Mapping线程主要…...

编程日记 2024/9/12 10:08:02

拱式桥安全结构健康监测解决方案

拱式桥作为一种常见的桥梁结构，其拱形设计不仅美观，还具有较高的承载能力。然而，随着使用年限的增加和环境因素的影响，拱式桥的结构健康和稳定需要持续监测和评估。自动化监测技术的应用，可以提升拱式桥的监测效率和准…...

编程日记 2024/9/12 10:06:00

windows和linux安装mysql5.7.31保姆级教程

一，资源如下，里面有windows和linux版的安装软件，内含Visual C2013中文版windows系统插件 windows资源地址：https://download.csdn.net/download/l1o3v1e4ding/89725150 linux（centos）资源地址：…...

编程日记 2024/9/12 10:00:54

如何使用 PowerShell 脚本来自动化 Windows 开发流程的教程（包括理论介绍和实践示例）

PowerShell 是一种强大的任务自动化和配置管理框架，它为系统管理员和开发人员提供了管理 Windows 操作系统和应用程序的能力。下面是一个关于如何使用 PowerShell 脚本来自动化 Windows 开发流程的教程，包括理论介绍和实践示例。第一部分：理…...

编程日记 2024/9/12 9:59:53

CTFHub技能树-信息泄露-HG泄漏

目录漏洞产生原因解题过程当开发人员使用 Mercurial 进行版本控制，对站点自动部署。如果配置不当,可能会将.hg 文件夹直接部署到线上环境。这就引起了 hg 泄露漏洞。漏洞产生原因 Mercurial(hg)是一种分布式版本控制系统，它与Git类似也可以用于管…...

编程日记 2024/9/12 9:57:51

OpenCV结构分析与形状描述符（18）比较两个轮廓相似度的函数matchShapes()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述比较两个形状。该函数用于比较两个形状。所有三个实现的方法都使用了 Hu 不变矩（参见 HuMoments） 函数原型 double c…...

编程日记 2024/9/12 9:56:50

CCS811二氧化碳传感器详解（STM32）

目录一、介绍二、传感器原理 1.原理图 2.引脚描述 3.工作原理介绍三、程序设计 main.c文件 ccs811.h文件 ccs811.c文件四、实验效果五、资料获取项目分享一、介绍 CCS811模块是一种气体传感器，可以测量环境中TVOC(总挥发性有机物质)浓度和eCO2…...

编程日记 2024/9/12 9:55:49

Navicat 17 新特性 | 聚焦 MongoDB

随着 Navicat 17 的盛大发布，其一系列创新特性赢得了广大用户的热烈反响。它不仅在模型设计上实现了突破性优化，提升了查询与配置的效率，还大幅优化了用户界面的交互体验，原生支持国产平台与操作系统，同时增强 BI 能力…...

编程日记 2024/9/12 9:53:47

openssl的使用

1、编译 Github下载：https://github.com/openssl/openssl 官网下载：https://openssl-library.org/source/index.html 官网历史版本：https://www.openssl.org/source/old/ 1.1 Windows下编译我的文章：OPC UA使用 Openssl库编译…...

编程日记 2024/9/12 9:51:45

ICETEK-DM6437-AICOM—— DMA直接存储器访问设计

#一、设计目的： 1 进一步了解 ICETEK-DM6437-AF 的内部存储器空间的分配及指令寻址方式： 内部存储器空间分配：研究 ICETEK-DM6437-AF 的存储器架构，包括但不限于片内 SRAM、片外 DRAM 和其他存储器模块。了解这些存储器的大小、起…...

编程日记 2024/9/12 9:50:44

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2026/2/7 4:57:53

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...

编程新知 2025/12/14 22:32:59

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统题目开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...

编程新知 2026/1/29 2:11:35

centos 7 部署awstats 网站访问检测

一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/23 8:33:56

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标商品数据同步场景：将1688商品信息…...

编程新知 2025/11/30 16:55:32

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。一、源型模式的定义原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点：避免重复初…...

编程新知 2026/2/7 10:59:04

cf2117E

原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置或，也可以在执行上述操作前执行一次删除任意和。求…...

编程新知 2026/2/4 15:29:40

蓝桥杯3498 01串的熵

问题描述对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2026/2/6 2:05:50

有限自动机到正规文法转换器v1.0

1 项目简介这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2026/1/31 13:13:32

解决步骤1：cdn引入

解决步骤2：其余css配置

解决步骤3：html代码

解决步骤4：script代码

相关文章：