wangeditor——cdn引入的形式创建一个简易版编辑器——js技能提升
昨天同事那边有个需求，就是要实现聊天功能，需要用到一个富文本编辑器，参考如下：
上面的这个效果图是博客园的评论输入框
最终使用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…...
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…...
【GeekBand】C++设计模式笔记1_介绍
课程目标 理解松耦合设计思想掌握面向对象设计原则掌握重构技法改善设计掌握GOF核心设计模式 什么是设计模式 目标：复用，以不变应万变 GOF设计模式 从面向对象谈起 深入理解面向对象 向下：深入理解三大面向对象机制 封装：隐藏…...
MySQL 数据库：原理、应用与发展
摘要：本文深入探讨了 MySQL 数据库相关内容。首先介绍了 MySQL 作为开源关系型数据库管理系统的显著特点，包括易用性、跨平台性、高性能、可扩展性、开源免费以及数据安全性等方面。接着详细阐述了其安装与配置过程，涵盖在不同操作系统上的安…...
7.2图像旋转
实验原理 在OpenCV中，图像旋转也是一种常见的几何变换，它可以用来调整图像的方向。图像旋转通常涉及绕着图像中心点旋转一定角度的操作。与图像平移类似，旋转也可以通过仿射变换来实现，但是旋转需要使用到旋转矩阵来定义旋转的角…...
学学vue-2
1.7 指令修饰符 keyup.enter：监听键盘回车事件，回车触发事件keyup.enter代码 v-model修饰符： v-model.trim：去首尾空格v-model.number：变数字（如果是数字的话，转变为数字） 事件名.…...
什么是 Grafana？
什么是 Grafana？ Grafana 是一个功能强大的开源平台，用于创建、查看、查询和分析来自多个来源的数据。通过可视化仪表盘（Dashboard），它能够帮助用户监控实时数据、生成历史报告，甚至进行预测分析。Grafana…...
【Prompt Engineering：思维树 (ToT)、检索增强生成 (RAG)、自动推理并使用工具 (ART)】
思维树 (ToT) 对于需要探索或预判战略的复杂任务来说，传统或简单的提示技巧是不够的。最近，Yao et el. (2023)(opens in a new tab) 提出了思维树（Tree of Thoughts，ToT）框架，该框架基于思维链提示进行了总…...
【习题】应用/元服务上架
判断题 1. 一个完整的发布软件包必须包含一个Profile文件。 A、正确(True) B、错误(False) 2. 编译打包的软件包存放在项目目录build > outputs > default下。 A、正确(True) B、错误(False) 单选题 1. 创建应用时，应用包名需要和在DevEco …...
性能测试的复习3-jmeter的断言、参数化、提取器
一、断言、参数化、提取器 需求： 提取查天气获取城市名请求的响应结果：城市对查天气获取城市名的响应结果进行响应断言和json断言对查天气获取城市名添加用户参数 1、步骤 查看天气获取城市名 json提取器（对响应结果提取、另一个接口请求…...
ORB-SLAM2关键点总结
1.ORB-SLAM2的总体框架是怎样的 ORB-SLAM2一共有三个线程，分别是Tracking、Local Mapping、Loop Closing线程，，其中Tracking负责完成关键点提取，并进行帧间匹配，同时初步选取关键帧；Local Mapping线程主要…...
拱式桥安全结构健康监测解决方案
拱式桥作为一种常见的桥梁结构，其拱形设计不仅美观，还具有较高的承载能力。然而，随着使用年限的增加和环境因素的影响，拱式桥的结构健康和稳定需要持续监测和评估。自动化监测技术的应用，可以提升拱式桥的监测效率和准…...
windows和linux安装mysql5.7.31保姆级教程
一，资源如下，里面有windows和linux版的安装软件，内含Visual C2013中文版windows系统插件 windows资源地址：https://download.csdn.net/download/l1o3v1e4ding/89725150 linux（centos）资源地址：…...
如何使用 PowerShell 脚本来自动化 Windows 开发流程的教程（包括理论介绍和实践示例）
PowerShell 是一种强大的任务自动化和配置管理框架，它为系统管理员和开发人员提供了管理 Windows 操作系统和应用程序的能力。下面是一个关于如何使用 PowerShell 脚本来自动化 Windows 开发流程的教程，包括理论介绍和实践示例。 第一部分：理…...
CTFHub技能树-信息泄露-HG泄漏
目录 漏洞产生原因 解题过程 当开发人员使用 Mercurial 进行版本控制，对站点自动部署。如果配置不当,可能会将.hg 文件夹直接部署到线上环境。这就引起了 hg 泄露漏洞。 漏洞产生原因 Mercurial(hg)是一种分布式版本控制系统，它与Git类似也可以用于管…...
的使用)
OpenCV结构分析与形状描述符（18）比较两个轮廓相似度的函数matchShapes()的使用
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 比较两个形状。 该函数用于比较两个形状。所有三个实现的方法都使用了 Hu 不变矩（参见 HuMoments） 函数原型 double c…...
CCS811二氧化碳传感器详解（STM32）
目录 一、介绍 二、传感器原理 1.原理图 2.引脚描述 3.工作原理介绍 三、程序设计 main.c文件 ccs811.h文件 ccs811.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 CCS811模块是一种气体传感器，可以测量环境中TVOC(总挥发性有机物质)浓度和eCO2…...
Navicat 17 新特性 | 聚焦 MongoDB
随着 Navicat 17 的盛大发布，其一系列创新特性赢得了广大用户的热烈反响。它不仅在模型设计上实现了突破性优化，提升了查询与配置的效率，还大幅优化了用户界面的交互体验，原生支持国产平台与操作系统，同时增强 BI 能力…...
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库编译…...
ICETEK-DM6437-AICOM—— DMA直接存储器访问设计
#一、设计目的： 1 进一步了解 ICETEK-DM6437-AF 的内部存储器空间的分配及指令寻址方式： 内部存储器空间分配：研究 ICETEK-DM6437-AF 的存储器架构，包括但不限于片内 SRAM、片外 DRAM 和其他存储器模块。了解这些存储器的大小、起…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
给网站添加live2d看板娘
给网站添加live2d看板娘 参考文献： stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下，文章也主…...