vue使用wangEditor

vue版本2.0;editor5.1.23版本;editor-for-vue:1.0.2版本
在这里插入图片描述
api文档入口
效果图
在这里插入图片描述
点击查看如何封装
安装步骤入口

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save

代码(未封装过的)

<template><div><div style="border: 1px solid #ccc"><toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><editorstyle="height: 500px; overflow-y: hidden"v-model="html":defaultConfig="defaultEditorConfig":mode="mode"@onCreated="onCreated"/></div><div><a-button type="primary" @click="htmlContent"> 请点我 </a-button></div></div>
</template>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const toolbarConfig = {};
toolbarConfig.excludeKeys = ["todo", //待办"emotion", //表情"insertLink", //超链接"insertVideo", //表情"group-video", //视频"codeBlock", //代码块"divider", //分割线
];
const defaultEditorConfig = {// JS 语法MENU_CONF: {},// 其他属性...
};
// 修改 uploadImage 菜单配置
defaultEditorConfig.MENU_CONF["uploadImage"] = {server: "后端提供的上传图片接口",fieldName: "file",//【注意】不需要修改的不用写,wangEditor 会去 merge 当前其他配置
};
export default Vue.extend({components: { Editor, Toolbar },data() {return {editor: null,html: "<p>hello</p>",toolbarConfig: toolbarConfig,defaultEditorConfig: defaultEditorConfig,mode: "default", // or 'simple'};},methods: {//编辑器创建完毕时的回调函数。onCreated(editor) {this.editor = Object.seal(editor); // 一定要用 Object.seal() ,否则会报错console.log(this.editor);},htmlContent() {console.log(this.html);},},mounted() {// 模拟 ajax 请求,异步渲染编辑器setTimeout(() => {this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";}, 1500);},beforeDestroy() {const editor = this.editor;if (editor == null) return;editor.destroy(); // 组件销毁时,及时销毁编辑器},
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

后端提供的上传图片接口响应格式需要按照wangEditor的来
在这里插入图片描述
excludeKeys可以排除掉某些不想要的菜单,其他都保留
放在defaultConfig事件里

 	<toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/>
const toolbarConfig = {};
toolbarConfig.excludeKeys = ["todo", //待办"emotion", //表情"insertLink", //超链接"insertVideo", //表情"group-video", //视频"codeBlock", //代码块"divider", //分割线
];
data() {return {toolbarConfig: toolbarConfig,};},

toolbarConfig.excludeKeys里面的key去哪里看?文档上面我是没有找到 哎
我是先打开官网上面的demo示例,再打开控制台然后在console下面输入toolbar找到的
在这里插入图片描述

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

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

相关文章

大佬带飞,代码分享不会用?玩转Git,跟上大佬节奏!

一、安装 Git 客户端 这里为大家提供了windows版的Git客户端以及安装图文详解文档。百度网盘&#xff1a; https://pan.baidu.com/s/1CDu0Ke199pt3Ysv-QtWObA 提取码&#xff1a;8888 如果过期了请留言联系我。 二、注册码云账号 打开码云网站&#xff1a;https://gitee.co…

保留网络[02/3]:大型语言模型转换器的继任者”

一、说明 在这项工作中&#xff0c;我们提出保留网络&#xff08;RETNET&#xff09;作为基础架构大型语言模型的结构&#xff0c;同时实现训练并行&#xff0c; 推理成本低&#xff0c;性能好。我们从理论上推导出这种联系 复发与关注之间。然后我们提出保留机制 序列建模&…

【数据库】通过实例讲清楚,Mongodb的增删查改,分组查询,聚合查询aggregate

目录 一.基础概念 二.数据库的管理 1.创建数据库 2.删除数据库 二.集合的管理 1.显示所有集合 2.创建集合 3.删除当前集合 4.向集合中插入元素 三.文档的管理 1.文档插入 2.文档的更新 3.文档的删除 4.文档查询 &#xff08;1&#xff09;查询基本语法&#xff1…

outlook等客户端报错:-ERR Login fail. Please using weixin token to login

使用outlook配置腾讯邮箱后&#xff0c;无法收取邮件&#xff0c;点击接收/发送所有文件夹&#xff0c; 提示报错&#xff1a; 任务“testqq.com - 正在接收”报告了错误(0x800CCC92):“电子邮件服务器拒绝您登录。请在“帐户设置”中验证此帐户的用户名及密码。 响应服务器:…

注册登录首选,趣味滑块验证码

前言 注册登录账户时&#xff0c;保障账户安全是首要任务&#xff01;使用趣味滑块验证码&#xff0c;既能有效防御恶意攻击&#xff0c;又能为验证过程增添一丝乐趣。让注册和登录变得更加有趣又安全&#xff01; HTML代码 <script src"https://cdn6.kgcaptcha.co…

Linux下 Socket服务器和客户端文件互传

目录 1.项目描述 2.函数准备 2.1 gets函数 2.2 popen函数、fread函数 2.3 access 函数 2.4 exit 函数 2.5 strtok 函数 2.6 chdir函数 3.项目代码 3.1服务器代码 3.2客户端代码 4.问题总结 1.项目描述 基于Soket聊天服务器&#xff0c;实现服务器和客户端的文件传输。…

docker搭建个人网盘和私有仓库Harbor

目录 1、使用mysql:5.7和 owncloud 镜像&#xff0c;构建一个个人网盘 2、安装搭建私有仓库 Harbor 1、使用mysql:5.7和owncloud&#xff0c;构建一个个人网盘 1.拉取mysql:5.6镜像&#xff0c;并且运行mysql容器 [rootnode8 ~]# docker pull mysql:5.7 [rootnode8 ~]# doc…

8.Redis-set

Set 常用命令saddsmemberssismemberscardspopsmovesrem集合间操作sinter 交集sinterstoresunion 并集sunionstoresdiff 差集sdiffstore 命令总结 内部编码应用场景使用 set来保存用户的“标签” set(集合)就是把一些有关联的数据放刀一起。 它与list的区别如下&#xff1a; 集合…

DeU-Net: 用于三维心脏mri视频分割的可变形(Deformable)U-Net

论文链接&#xff1a;https://arxiv.org/abs/2007.06341 代码链接&#xff1a;文章都看完了实在找不到代码&#xff01;好崩溃&#xff01;好崩溃&#xff01;已经发邮件联系作者&#xff01; 摘要 心脏磁共振成像(MRI)的自动分割促进了临床应用中高效、准确的体积测量。然而…

如何在SOLIDWORKS中更改单位-硕迪科技

SOLIDWORKS中的单位系统 SOLIDWORKS中的单位系统可以针对单个文件修改、一次修改多个文件以及在默认模板中进行修改。每个SOLIDWORKS文件都有一个单位系统&#xff0c;该单位系统由该文件的文档属性控制。默认情况下&#xff0c;SOLIDWORKS零件、装配体和工程图模板各自规定了…

【AIGC专题】Stable Diffusion 从入门到企业级应用0414

一、前言 本文是《Stable Diffusion 从入门到企业级应用实战》系列的第四部分能力进阶篇《Stable Diffusion ControlNet v1.1 图像精准控制》的第0414篇 利用Stable Diffusion ControlNet 法线贴图模型精准控制图像生成。本部分内容&#xff0c;位于整个Stable Diffusion生态体…

BLE Mesh蓝牙mesh网多跳大数据量高带宽传输数据方法

1、BLE Mesh数据传输现状 BLE Mesh网络技术是低功耗蓝牙的一个进阶版&#xff0c;Mesh扩大了蓝牙在应用中的规模和范围&#xff0c;因为它同时支持超过三万个网络节点&#xff0c;可以跨越大型建筑物&#xff0c;不仅可以使得医疗健康应用更加方便快捷&#xff0c;还能监测像学…

Python调用Jumpserver的Api接口增删改查

引言 Jumpserver是一款强大的堡垒机系统&#xff0c;可以有效管理和控制企业内部服务器的访问权限&#xff0c;提高网络安全性。本文将介绍如何使用Python编程语言&#xff0c;结合Jumpserver提供的API接口&#xff0c;实现对跳板机的管理和操作。 1、什么是Jumpserver&#…

Python Tcp编程

网络连接与通信是我们学习任何编程语言都绕不过的知识点。Python 也不例外&#xff0c;本文就介绍因特网的核心协议 TCP &#xff0c;以及如何用 Python 实现 TCP 的连接与通信。 TCP 协议 TCP协议&#xff08;Transmission Control Protocol&#xff0c; 传输控制协议&#…

code阶段——gitgitlab安装

在code阶段&#xff0c;我们需要将不同版本的代码存储到一个仓库中&#xff0c;常见的版本控制工具就是SVN或者Git&#xff0c;这里我们采用Git作为版本控制工具&#xff0c;GitLab作为远程仓库。 Git安装 https://git-scm.com/&#xff08;傻瓜式安装&#xff09; GitLab安…

leetcode 143. 重排链表

2023.9.5 先将链表中的节点存储到数组中&#xff0c;再利用双指针重新构造符合条件的链表。代码如下&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNod…

第15章_锁: (表级锁、页级锁、行锁、悲观锁、乐观锁、全局锁、死锁)

3.2 从数据操作的粒度划分&#xff1a;表级锁、页级锁、行锁 为了提高数据库并发度&#xff0c;每次锁定的数据范围越小越好&#xff0c;理论上每次只锁定当前操作的数据的方案会得到最大的并发度&#xff0c;但管理锁是很耗资源&#xff08;涉及获取、检查、释放锁等动作)。因…

统一潮流控制器 (UPFC) 的应用,以增强电力系统中的电压稳定性(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

智能机器人:打造自动化未来的关键技术

文章目录 1. 智能机器人的基本概念2. 智能机器人的关键技术2.1 机器视觉2.2 机器学习与深度学习2.3 传感器技术 3. 智能机器人的应用领域3.1 制造业3.2 医疗保健3.3 农业3.4 服务业 4. 智能机器人的未来趋势4.1 自主决策能力的提升4.2 协作与互操作性4.3 个性化定制4.4 环境感知…

4.矩阵的几何意义、变基与迹

文章目录 变基操作与矩阵矩阵的迹几何意义矩阵迹的几条性质 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; 变基操作与矩阵 我们知道空间中一点的坐标可以表示以原点为起点以该点为终点的向量。 以二维平面为例&#xff0c;如下图 选取…