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

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

news 2025/9/15 17:12:33

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

最终使用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

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程新知 2025/9/14 12:35:19

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/7/30 14:13:39

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成，核心是利用 HTTP 协议的 Range 请求头指定下载范围： 实现原理 Range 请求头：向服务器请求文件的特定字节范围（如 Range: bytes1024-） 本地文件记录：保存已…...

编程新知 2025/8/9 2:59:35

【单片机期末】单片机系统设计

主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图一、题目要求二、绘制系统状态流图题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。三、利用定时器产生时…...

编程新知 2025/9/7 11:36:19

OpenLayers 分屏对比(地图联动)

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/9/11 9:39:35

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...

编程新知 2025/9/7 8:50:57

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/9/6 0:16:50

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础协议全称 ：HyperText Transfer Protocol（超文本传输协议） 默认端口 ：HTTP 使用 80 端口，HTTPS 使用 443 端口。请求方法 ： GET ：用于获取资源，…...

编程新知 2025/8/25 4:55:24

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题问题现象当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/9 1:34:25

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/9/8 15:21:15

解决步骤1：cdn引入

解决步骤2：其余css配置

解决步骤3：html代码

解决步骤4：script代码

相关文章：