前端添加富文本/Web 富文本编辑器wangeditor
官网wangEditor
需要引入两个文件
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
前端代码:
<div id="editor—wrapper"><div id="toolbar-container"><!-- 工具栏 --></div><div id="editor-container" style="height: 300px;"><!-- 编辑器 --></div>
</div>
JQ代码
// 富文本const {createEditor,createToolbar} = window.wangEditorconst editorConfig = {MENU_CONF: {},placeholder: '请输入',onChange(editor) {// 富文本输入的内容const html = editor.getHtml();console.log(html, '内容');},}editorConfig.MENU_CONF['uploadImage'] = {server: 'http://xxxxxxx.cn/gzh/uploadFile',maxFileSize: 10 * 1024 * 1024, // 10MfieldName: 'img',// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []allowedFileTypes: ['image/*'],// 自定义上传参数,例如传递验证的 token 等。参数会被添加到 formData 中,一起上传到服务端。meta: {image_class_id: '2',file_type: '1'},// 自定义增加 http header// headers: {// Accept: 'text/x-json',// otherKey: 'xxx'// },// 上传进度的回调函数onProgress(progress) { // JS 语法// progress 是 0-100 的数字console.log('progress', progress)},// // 单个文件上传成功之后// onSuccess(file, res) { // JS 语法// console.log(`${file.name} 上传成功`, res)// },// 单个文件上传失败onFailed(file, res) { // JS 语法console.log(`${file.name} 上传失败`, res)},// 上传错误,或者触发 timeout 超时onError(file, err, res) { // JS 语法console.log(`${file.name} 上传出错`, err, res)},// 自定义插入图片customInsert(res, insertFn) { // JS 语法// res 即服务端的返回结果let url = res.data.urllet alt = res.data.namelet href = res.data.url// 从 res 中找到 url alt href ,然后插入图片insertFn(url, alt, href)},}const editor = createEditor({selector: '#editor-container',html: '<p><br></p>',config: editorConfig,mode: 'default', // or 'simple'})const toolbarConfig = {}toolbarConfig.excludeKeys = ['codeBlock','group-video' // 排除菜单组,写菜单组 key 的值即可]const toolbar = createToolbar({editor,selector: '#toolbar-container',config: toolbarConfig,mode: 'default', // or 'simple'})// 富文本 end
效果:

相关文章:
前端添加富文本/Web 富文本编辑器wangeditor
官网wangEditor 需要引入两个文件 <link href"https://unpkg.com/wangeditor/editorlatest/dist/css/style.css" rel"stylesheet"> <script src"https://unpkg.com/wangeditor/editorlatest/dist/index.js"></script> 前端…...
软件价值2-贪吃蛇游戏
贪吃蛇游戏虽然很多,不过它可以作为软件创作的开端,用python来实现,然后dist成windows系统可执行文件。 import pygame import sys import random# 初始化 pygame.init()# 游戏设置 width, height 640, 480 cell_size 20 snake_speed 15# …...
应用案例 | 基于三维机器视觉的汽车副车架在线测量解决方案
在汽车制造领域中,精确的测量是确保产品质量和生产效率的关键。随着科技的不断进步,测量技术也在不断精进。 副车架是汽车底盘的重要组成部分,负责支撑引擎,是车辆结构中至关重要的组成部分之一,其制造质量直接关系到汽…...
线程的创建和使用threading.Thread()
【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 线程的创建和使用 threading.Thread() [太阳]选择题 关于以下代码的输出是? import threading import time def f(name): print(name) for i in range(3): print…...
大数据学习之Redis,十大数据类型的具体应用(四)
3.8 Redis基数统计(HyperLogLog) 需求 统计某个网站的UV、统计某个文章的UV 什么是UV unique Visitor ,独立访客,一般理解为客户端IP 大规模的防止作弊,需要去重复统计独立访客 比如IP同样就认为是同一个客户 需要去…...
哪个牌子的头戴式耳机好?推荐性价比高的头戴式耳机品牌
随着科技的不断发展,耳机市场也呈现出百花齐放的态势,从高端的奢侈品牌到亲民的平价品牌,各种款式、功能的耳机层出不穷,而头戴式耳机作为其中的一员,凭借其优秀的音质和降噪功能,受到了广大用户的喜爱&…...
Java EE 5 SDK架构
Java EE 5 SDK架构 大型组织每天都要处理大量数据和多用户的相关事务。为管理该组织如此大型而又复杂的系统,开发了企业应用程序。企业应用程序是在服务器上托管的应用程序,通过计算机网络同时向大量用户提供服务。这种应用程序可采用各种技术开发,如Java EE 5。Java EE 5平…...
nop-entropy可逆计算入门(1)
第1步:从大佬的gitee:https://gitee.com/canonical-entropy/nop-entropy下载源码,进行本地编译,具体编译看项目下的readme,想偷懒的可以下载我编译后的jar,放到自己的maven仓库 https://pan.baidu.com/s/15qANnrCh5RV…...
C++(9) 虚函数
文章目录 虚函数1. 虚函数1.1 虚函数案例11.2 虚函数案例21.2 纯虚函数1.3 纯虚函数语法要求总环1.4 纯虚函数应用1.4.1 生活案例1.4.2 虚函数引用代码 虚函数 1. 虚函数 1.1 虚函数案例1 #include <iostream>using namespace std;class Animal { public:// Animal 类…...
uniapp 使用canvas 画海报,有手粘贴即可用(拆成组件了,看后面)
1.直接使用 html部分 <view click"doposter">下载海报</view> <canvas canvas-id"myCanvas" type2d style"width: 370px; height: 550px;opcity:0;position: fixed;z-index:-1;" id"myCanvas" />js 部分 drawBac…...
Amazon Bedrock 的微调和持续预训练功能允许用户使用私有数据定制模型
今天我很高兴地宣布,您现在可以在 Amazon Bedrock 中使用自己的数据,安全并私密地定制基础模型(FMs),按照您所在领域、企业和用例的特定要求构建应用程序。借助定制模型,您可以创建独特的用户体验ÿ…...
Pyecharts绘制多种炫酷气泡图
Pyecharts绘制多种炫酷气泡图 引言 数据可视化是数据分析中不可或缺的一环,而Pyecharts作为一款基于Echarts的Python图表库,提供了丰富的图表类型,其中气泡图是一种常用于展示三维数据的炫酷图表。本文将介绍如何使用Pyecharts绘制多种炫酷…...
C# 多线程(2)——线程同步
目录 1 线程不安全2 线程同步方式2.1 简单的阻塞方法2.2 锁2.2.1 Lock使用2.2.2 互斥体Mutex2.2.3 信号量Semaphore2.2.3 轻量级信号量SemaphoreSlim2.2.4 读写锁ReaderWriterLockSlim 2.3 信号同步2.3.1 AutoResetEvent2.3.1.1 AutoResetEvent实现双向信号 2.3.2 ManualResetE…...
Java设计模式【工厂模式】
Java设计模式【工厂模式】 前言 三种工厂模式:简单工厂模式、工厂方法模式、抽象工厂模式; 创建型设计模式封装对象的创建过程,将对象的创建和使用分离开,从而提高代码的可维护性和可扩展性 简单工厂模式 概述:将…...
AI智能分析+明厨亮灶智慧管理平台助力“舌尖上的安全”
春节是中国最重要的传统节日之一,在春节期间,人们聚餐需求激增,餐饮业也迎来了高峰期。在这个时期,餐饮企业需要更加注重食品安全和卫生质量,以保证消费者的健康和权益,明厨亮灶智慧管理成为了餐饮业中备受…...
【现代密码学基础】详解完美安全与香农定理
目录 一. 介绍 二. 完美安全的密钥与消息空间 三. 完美安全的密钥长度 四. 最优的完美安全方案 五. 香农定理 (1)理论分析 (2)严格的正向证明 (3)严格的反向证明 六. 小结 一. 介绍 一次一密方案…...
Python 将文本转换成语音播放 pyttsx3
Python 将文本转换成语音播放 pyttsx3 目录 Python 将文本转换成语音播放 pyttsx3 1. 安装 2. 使用 3. 封装 Pyttsx3 是一个 Python 库,它提供了文本到语音(Text-to-Speech,TTS)转换的功能。这个库允许 Python 程序通过调用本…...
FPGA高端项目:Xilinx Artix7系列FPGA 多路视频缩放拼接 工程解决方案 提供4套工程源码+技术支持
目录 1、前言版本更新说明给读者的一封信FPGA就业高端项目培训计划免责声明 2、相关方案推荐我这里已有的FPGA图像缩放方案我已有的FPGA视频拼接叠加融合方案本方案的Xilinx Kintex7系列FPGA上的ov5640版本本方案的Xilinx Kintex7系列FPGA上的HDMI版本 3、设计思路框架设计框图…...
开源模型应用落地-业务优化篇(三)
一、前言 假如您跟随我的脚步,学习到上一篇的内容,到这里,相信细心的您,已经发现了,在上一篇中遗留的问题。那就是IM服务过载的时候,如何进行水平扩容? 因为在每个IM服务中,我们用JV…...
基于SpringBoot+Vue实现的物流快递仓库管理系统
基于SpringBootVue实现的物流快递仓库管理系统 文章目录 基于SpringBootVue实现的物流快递仓库管理系统系统介绍技术选型成果展示账号地址及其他说明源码获取 系统介绍 系统演示 关注视频号【全栈小白】,观看演示视频 基于SpringBootVue实现的物流快递仓库管理系…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
