vue wangEditor富文本编辑器 默认显示与自定义工具栏配置

在这里插入图片描述
1.vue 显示wangEditor富文本编辑器

<template><div style="border: 1px solid #ccc;"><Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode"/><Editor style="height: 300px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"@onCreated="onCreated"></div>
</template><script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {components: { Editor, Toolbar },data() {return {editor: null,html: '<p>hello</p>',toolbarConfig: { },//默认全部展示editorConfig: { placeholder: '请输入内容...' },mode: 'default', // or 'simple'}},methods: {onCreated(editor) {this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错},},mounted() {// 模拟 ajax 请求,异步渲染编辑器setTimeout(() => {this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'}, 1500)},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时,及时销毁编辑器}
}
</script><style src="@wangeditor/editor/dist/css/style.css"></style>

2.自定义显示 根据toolbarConfig:来修改菜单栏和编辑器的配置
参考官网

 toolbarConfig:{//菜单栏配置toolbarKeys:[//菜单 key 'headerSelect''headerSelect','|',// 菜单'bold','italic',]},

在这里插入图片描述
3.怎么拿到编辑器里边的DOM元素通过@onChange="onChange"

 onChange(){console.log('监听事件',this.html);},

在这里插入图片描述

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

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

相关文章

在线商城项目EShop【ListView、adapter】

要求如下&#xff1a; 1、创建在线商城项目EShop&#xff1b; 2、修改布局文件activity_main.xml&#xff0c;使用LineaLayout和ListView创建商品列表UI&#xff1b; 3、创建列表项布局list_item.xml&#xff0c;设计UI用于显示商品图标、名称和价格信息&#xff1b; 4、创…

流媒体播放器EasyPlayer.js无法播放H.265的情况是什么原因?该如何解决?

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;可支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff0c;能支持WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#…

基于 ECDSA(椭圆曲线数字签名算法)生成 JWT Token

文章目录 1. 为什么选择 ECDSA&#xff08;椭圆曲线数字签名算法&#xff09;2. 生成签名公私钥2.1. 使用 Open SSL 生成公私钥2.2. Java 语言 pkcs8 格式私钥转换 3. SpringBoot 分环境配置密钥3.1. yaml 文件配置3.2. 密钥配置类 4. 使用 auth0 生成 JWT Token4.1. 依赖4.2. …

外卖小程序开发指南:打造完美的点餐体验

第一步&#xff1a;项目设置和初始化 首先&#xff0c;您需要选择一个适合您的开发平台&#xff0c;例如微信小程序、支付宝小程序或其他移动应用平台。接下来&#xff0c;创建一个新的小程序项目&#xff0c;并初始化所需的文件和目录。 示例代码&#xff08;微信小程序&am…

自定义类型:结构体,枚举,联合

自定义类型&#xff1a;结构体&#xff0c;枚举&#xff0c;联合 前言&#xff1a;结构体1.结构体类型的声明2.结构的自引用3.结构体变量的定义和初始化4.结构体内存对齐5.结构体传参6.结构体实现位段&#xff08;位段的填充&可移植性&#xff09; 枚举1.枚举类型的定义2.枚…

多维时序 | MATLAB实现WOA-CNN-BiGRU-Attention多变量时间序列预测(SE注意力机制)

多维时序 | MATLAB实现WOA-CNN-BiGRU-Attention多变量时间序列预测&#xff08;SE注意力机制&#xff09; 目录 多维时序 | MATLAB实现WOA-CNN-BiGRU-Attention多变量时间序列预测&#xff08;SE注意力机制&#xff09;预测效果基本描述模型描述程序设计参考资料 预测效果 基本…

string类模拟实现——C++

一、构造与析构 1.构造函数 构造函数需要尽可能将成员在初始化列表中初始化&#xff0c;string类的成员这里自定义的和顺序表相似&#xff0c;有_str , _size , _capacity , 以及一个静态成员 npos &#xff0c;构造函数这里实现两种&#xff0c;一种是传参为常量字符串的&am…

企业架构相关

数据架构的作用首先是找到所有的业务对象 和数据对象。 在数据对象分析里面有一个重点就是主数据识别和分析。

Python接口自动化搭建过程,含request请求封装

接口测试自动化好处 显而易见的好处就是解放双手&#x1f600;。 可以在短时间内自动执行大量的测试用例通过参数化和数据驱动的方式进行测试数据的变化&#xff0c;提高测试覆盖范围快速反馈测试执行结果和报告支持持续集成和持续交付的流程 使用Requestspytestallure搭建测…

【蓝桥杯选拔赛真题64】Scratch神奇画笔 少儿编程scratch图形化编程 蓝桥杯选拔赛真题解析

scratch神奇画笔 第十四届青少年蓝桥杯scratch编程选拔赛Stema比赛真题 一、题目要求 编程实现 1). 运行程序,背景如图所示; 2). 等待1秒后切换到下一个角色、背景(画板中简笔画为参照绘制样例); 3). 按下鼠标左键,画笔隐藏并跟随鼠标移动同时在空白处画线(松开鼠标…

Java skill - 动态指定feign的访问地址

Java skill - 动态指定feign的访问地址 场景编码新增feign传参类新增调用内部服务的feign接口feign配置类逻辑修改 大坑 场景 在有下沉节点项目的前提下&#xff0c;使用feign调用内部服务的时候&#xff0c;在redis查询需要调用的内部服务的elb地址并调用 编码 新增feign传…

除了 MySQL,这些数据库你都认识么?

什么是数据库&#xff1f; 这个问题相信对学编程的朋友们来说过于简单了&#xff0c;大家想必都是增删改查的好手。 但如果让你说出 10 种不同类型的数据库&#xff0c;阁下该如何应对&#xff1f; 这篇文章&#xff0c;是对数据库技术的一个小科普&#xff0c;希望能帮大家…

通俗易懂了解大语言模型LLM发展历程

1.大语言模型研究路程 NLP的发展阶段大致可以分为以下几个阶段&#xff1a; 词向量词嵌入embedding句向量和全文向量理解上下文超大模型与模型统一 1.1词向量 将自然语言的词使用向量表示&#xff0c;一般构造词语字典&#xff0c;然后使用one-hot表示。   例如2个单词&…

STL算术生成和集合算法

目录 算术生成算法accumulate 算术生成算法file 常用集合算法 常用集合算法 常用集合算法set_difference 算术生成算法accumulate 算术生成算法属于小型算法&#xff0c;使用时包含的头文件为 include <numeric> accumulate(iterator beg, iterator end, value); …

【Java】JSONArray详解

JSONArray是JSON数据格式中的一种数据结构&#xff0c;主要用于存储和操作有序的元素集合。本文将对JSONArray进行详细介绍&#xff0c;包括其定义、使用方法和实际应用场景。 定义 JSONArray是一种有序的元素集合&#xff0c;可以包含任意类型的数据&#xff0c;如字符串、数…

初识java

目录 1. cmd(命令提示符) 1. 什么是cmd 2. cmd常用命令 1. 打开cmd 2.常用命令 2. 什么是java 1. 为什么学Java? 2. JDK的下载和安装 3.第一个java程序(重点) 1.使用记事本编写程序 2.翻译文件(编译) 3.运行文件 4.配置环境变量 1.为什么要配置环境变量 2.配置…

华纳云:linux怎么查看Raid磁盘阵列信息

要查看Linux系统中的RAID磁盘阵列信息&#xff0c;您可以使用以下命令和工具&#xff1a; 使用mdadm工具查看RAID信息&#xff1a; mdadm是用于管理Linux软件RAID&#xff08;Redundant Array of Independent Disks&#xff09;的命令行工具。您可以使用以下命令来查看RAID磁…

MySQL学习笔记1

任务背景&#xff1a; 将原来的数据库从原来的MySQL-5.5 升级到现在的MySQL-5.7&#xff0c;并保证数据完整。 1&#xff09;不同版本MySQL的安装&#xff1b;yum glibc、源码安装&#xff0c;是企业100%要用到的。 2&#xff09;MySQL数据库版本升级&#xff1b;&#xff08…

加密算法、哈希算法及其区别+国密简介

现代加密算法是信息安全领域中常用的算法&#xff0c;用于保护数据的机密性和完整性。以下是一些常用的现代加密算法&#xff1a; 加密算法&#xff08;Encryption Algorithm&#xff09; 目标&#xff1a;加密算法的主要目标是保密性&#xff08;Confidentiality&#xff09;…

AndroidStudio无法查看Compose重组次数?

印象中是一开始使用AndroidStudio LayoutInspector想查看Compose重组次数的时候&#xff0c;一开始折腾了下后来忘了这茬事了&#xff0c;最近&#x1fa9c;到期了&#xff0c;家里又换了台新的mac mini又看到这个问题&#x1f60a;&#xff0c;就想着给大家整理了一下解决方法…