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

wangeditor编辑器配置

vue项目中使用编辑器,轻量,操作栏选取自己需要的

官网地址:用于 Vue React | wangEditor

使用在vue项目中引入
 

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

封装成组件使用

<template><div style="border: 1px solid #ccc; margin:0 auto;"><Toolbarstyle="border-bottom: 1px solid #ccc;":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="onCreated"@onChange="onChange"/></div>
</template>
<script>import Vue from 'vue'import { Editor, Toolbar } from '@wangeditor/editor-for-vue'export default Vue.extend({components: { Editor, Toolbar },props: {value: { type: String, required: true },},data() {return {editor: null,html: '',toolbarConfig: { excludeKeys:["blockquote","header1","header2","header3","headerSelect", "fontFamily","code","clearStyle","todo", "emotion","insertLink","insertImage", "insertTable","group-video","codeBlock","redo","headerSelect","insertVideo",]},editorConfig: { placeholder: '请输入内容...' ,MENU_CONF: {uploadImage: {// 配置上传图片customUpload: this.update},},},mode: 'simple', // or 'default'}},created(){    },methods: {onCreated(editor) { this.editor = Object.seal(editor) },onChange(editor) {this.$emit('change', editor.getHtml());},getEditorText() {const editor = this.editor;if (editor == null) return;},        update(files,insertFn){//图片上传var formData = new FormData();formData.append('file', files);//根据后台提供的图片上传接口,进行接口配置和上传this.apiSever.post(this.URl.UPLOAD,formData, res => {insertFn(res.data.url);})},},mounted() {this.$nextTick(() => {this.html = this.value})},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() }
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

 

相关文章:

wangeditor编辑器配置

vue项目中使用编辑器&#xff0c;轻量&#xff0c;操作栏选取自己需要的 官网地址&#xff1a;用于 Vue React | wangEditor 使用在vue项目中引入 npm install wangeditor/editor --savenpm install wangeditor/editor-for-vue --save 封装成组件使用 <template>&…...

Sqlite使用WAL模式指南

本文地址&#xff1a;http://t.csdn.cn/kE8ND 文章目录 一、WAL模式的原理二、开启WAL后必须要设置的参数1.PRAGMA SYNCHRONOUS&#xff08;1&#xff09;SYNCHRONOUS的类型&#xff08;2&#xff09;WAL下如何选择SYNCHRONOUS类型 2.PRAGMA wal_autocheckpoint3.sqlite3_busy…...

一套高质量可靠的 React Hooks 库

个人使用&#xff0c;感受&#xff0c;挺好用 https://ahooks.js.org/zh-CN 我主要用了这个 useCountDown 倒计时&#xff0c;再也不用费心费力去写一个倒计时方法了&#xff0c;而且直接提供end之后要做什么。...

集合---list接口及实现类

一、list概述 1、list接口概述 List接口继承自Collection接口&#xff0c;是单列集合的一一个重要分支&#xff0c;我们习惯性地会将实现了 List接口的对象称为List集合。在List集合中允许出现重复的元素&#xff0c;所有的元素是以一种线性方 式进行有序存储的&#xff0c;在…...

JVM简述

JDK&JRE&JVMJVM运行时内存结构图方法区堆区栈区程序计数器本地方法栈 JVM 的主要组成部分及其作用 JDK&JRE&JVM JVM就是java虚拟机&#xff0c;一台虚拟的机器&#xff0c;用来运行java代码 但并不是只有这台机器就可以的&#xff0c;java程序在运行时需要依赖…...

7.25训练总结

考场错误&#xff1a; A题其实并不简单&#xff0c;但是先想了一个方法后&#xff0c;就交了&#xff0c;wa了后一直卡住&#xff0c;策略不当&#xff0c;到最后后期写C的时候也犯了一些低级的错误&#xff0c;这点需要注意。 之后顺利的把BCDHI写完后&#xff0c;又完成了A的…...

java注解@FeignClient修饰的类路径不在spring boot入口类所在的包下,有哪几种处理方式?

一、注解EnableFeignClients 修饰在spring boot入口类&#xff0c;使得openfeign的FeignClient注解生效。 我们进一步看看注解EnableFeignClients的使用方式。 String[] basePackages() default {};Class<?>[] basePackageClasses() default {};Class<?>[] clie…...

神经网络随记-参数矩阵、剪枝、模型压缩、大小匹配、、

神经网络的参数矩阵 在神经网络中&#xff0c;参数矩阵是模型学习的关键部分&#xff0c;它包含了神经网络的权重和偏置项。下面是神经网络中常见的参数矩阵&#xff1a; 权重矩阵&#xff08;Weight Matrix&#xff09;&#xff1a;权重矩阵用于线性变换操作&#xff0c;将输…...

4、Kubernetes 集群 YAML 文件详解

目录 一、YAML 概述 二、YAML 基本语法 三、YAML 数据结构 四、k8s资源清单描述方法 五、YAML 快速编写 1、使用 kubectl create 命令 2、使用 kubectl get 命令导出 yaml 文件 一、YAML 概述 k8s 集群中对资源管理和资源对象编排部署都可以通过声明YAML文件来解决&…...

leetcode93. 复原 IP 地址(java)

复原 IP 地址 leetcode93. 复原 IP 地址回溯算法代码演示 回溯算法 leetcode93. 复原 IP 地址 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 ‘.’ 分隔。 例如&#xff1a;“0.1.2…...

极光Java 版本服务器端实现别名消息推送

文章目录 引言I 概述1.1 依赖包1.2 极光证书环境参数1.3 构建推送对象II 推送内容2.1 配置推送内容2.2 获取通知消息内容2.3 配置IOS通知内容2.4 配置Android通知内容2.5 发起推送2.6 分批推送2.7 初始化密钥2.8 配置密钥引言 REST API 文档:https://docs.jiguang.cn/jpush/se…...

【Lua学习笔记】Lua进阶——Table(4)继承,封装,多态

文章目录 封装继承多态 封装 // 定义基类 Object {}//由于表的特性&#xff0c;该句就相当于定义基类变量 Object.id 1//该句相当于定义方法&#xff0c;Object可以视为定义的对象&#xff0c;Test可以视为方法名 //我们知道Object是一个表&#xff0c;但是抽象地看&#xff…...

安全性证明(四)Practical Identity-Based Encryption Without Random Oracles

...

Linux中常用的指令

ls ls [选项] [目录或文件] 功能&#xff1a;对于目录&#xff0c;列出该目录下所有的子目录和文件&#xff1b;对于文件&#xff0c;列出该文件的文件名和其他属性 常用选项&#xff1a; -a:列出目录下的所有文件&#xff0c;包括以.开头的隐藏文件 -l:列出文件的详细信息。…...

【java】【面对对象高级4】内部类、枚举、泛型

目录 1、内部类 1.1 成员内部类【了解】 1.1.1 定义 1.1.2 扩展变量 1.2 静态内部类【了解】 1.2.1 定义 1.2.2 扩展变量 1.3 局部内部类【了解】 1.4 匿名内部类【重点】 1.4.1 定义 1.4.1.1 常规写法 1.4.1.2 匿名内部类改造 1.4.2 匿名内部类的常见使用场景 1.4.2…...

Python的用处到底是什么?(三)

11. 数据库操作&#xff1a;Python的库&#xff0c;如sqlite3和SQLAlchemy&#xff0c;可以连接和操作各种类型的数据库。 Python提供了一些库和工具&#xff0c;如sqlite3和SQLAlchemy&#xff0c;用于连接和操作各种类型的数据库。以下是关于这两个库的详细解释&#xff1a;…...

【Nodejs】Express基本使用

Express 中文网 基于 Node.js 平台&#xff0c;快速、开放、极简的 web 开发框架。 1.Express的安装方式 Express的安装可直接使用npm包管理器上的项目&#xff0c;在安装npm之前可先安装淘宝镜像&#xff1a; npm install -g cnpm --registryhttps://registry.npmmirror.com/…...

k8s集群安装v1.20.9

参考网上资料并将异常问题解决&#xff0c;经测试可正常安装集群。 1.我的环境准备 本人使用vmware pro 17新建三个centos7虚拟机&#xff0c;每个2cpu&#xff0c;20GB磁盘存储&#xff0c;内存2GB&#xff0c;其中主节点的内存3GB&#xff0c;可使用外网. 2.所有节点安装D…...

Staples Drop Ship EDI 需求分析

Staples 是一家美国零售公司&#xff0c;总部位于马萨诸塞州弗拉明汉&#xff0c;主要提供支持工作和学习的产品和服务。该公司于 1986 年在马萨诸塞州布莱顿开设了第一家门店。到 1996 年&#xff0c;该公司已跻身《财富》世界 500 强&#xff0c;后来又收购了办公用品公司 Qu…...

模型调参及优化

调参 调权重参数&#xff0c;偏置参数 训练数据集用来训练参数w&#xff0c;b 调超参数 验证数据集用来选择超参数学习率lr&#xff0c;隐藏层大小等 如何调参 当泛化误差和训练误差都没有降下去说明欠拟合&#xff1b;当训练误差降下去&#xff0c;但泛化误差出现上升形式&…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

el-amap-bezier-curve运用及线弧度设置

文章目录 简介示例线弧度属性主要弧度相关属性其他相关样式属性完整示例链接简介 ‌el-amap-bezier-curve 是 Vue-Amap 组件库中的一个组件,用于在 高德地图 上绘制贝塞尔曲线。‌ 基本用法属性path定义曲线的路径,可以是多个弧线段的组合。stroke-weight线条的宽度。stroke…...

视觉slam--框架

视觉里程计的框架 传感器 VO--front end VO的缺点 后端--back end 后端对什么数据进行优化 利用什么数据进行优化的 后端是怎么进行优化的 回环检测 建图 建图是指构建地图的过程。 构建的地图是点云地图还是什么信息的地图&#xff1f; 建图并没有一个固定的形式和算法…...

前端异步编程全场景解读

前端异步编程是现代Web开发的核心&#xff0c;它解决了浏览器单线程执行带来的UI阻塞问题。以下从多个维度进行深度解析&#xff1a; 一、异步编程的核心概念 JavaScript的执行环境是单线程的&#xff0c;这意味着在同一时间只能执行一个任务。为了不阻塞主线程&#xff0c;J…...

.Net Framework 4/C# 面向对象编程进阶

一、继承 (一)使用继承 子类可以继承父类原有的属性和方法,也可以增加原来父类不具备的属性和方法,或者直接重写父类中的某些方法。 C# 中使用“:”来表示两个类的继承。子类不能访问父类的私有成员,但是可以访问其公有成员,即只要使用 public 声明类成员,就既可以让一…...