Vue3学习(二十)- 富文本插件wangeditor的使用
写在前面
学习、写作、工作、生活,都跟心情有很大关系,甚至有时候我更喜欢一个人独处,戴上耳机coding的感觉。

明显现在的心情,比中午和上午好多了,心情超棒的,靠自己解决了两个问题:
- 新增的时候点击
TreeSelect控件控制台会给出报错 - 分类新增和编辑时,报错父类和电子书iD不能为空的问题
富文本插件wangeditor的使用
官网地址:https://www.wangeditor.com/
1、安装
npm i wangeditor@4.6.3 --save
2、使用 npm 安装
import E from 'wangeditor'
const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()
3、在表单中使用
在form中加入标签,示例代码如下:
<a-form-item label="内容">
<div id="content"></div>
</a-form-item>
setup(){
const editor = new E("#content")
const add(){
editor.create();
},
const edit(){
editor.create();
}
}
4、效果:

写在最后
这里给广大网友个建议,就是学习要讲究时效性,比如你找的学习资料,看下是否严重超时,要么就会因为版本或者环境差异问题,足够你搞个1-2天了,哈哈,我上午大部份时间就是在搞环境,还好目前没任何遗留问题,感觉在变强中!
Vue3学习(二十)- 富文本插件wangeditor的使用的更多相关文章
- Python3.5 学习二十四
本节课程大纲: -------------------------------------------------------------------------------------------- ...
- 基于bootstrap的富文本框——wangEditor【欢迎增加开发】
先来一张效果图: 01. 引言 老早就開始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的样例. 如今网络上开源的富文本框插件许多 ...
- 小程序快速部署富文本插件wxParser
为了解决html2wxml在ios下字体过大问题,又发现一个比较好用的富文本插件:wxParser. 目前 wxParser 支持对一般的富文本内容包括标题.字体大小.对齐和列表等进行解析.同时也支持 ...
- 【富文本、JS】将接口传来的全部纯URL替换为富文本插件能识别到的img标签
replaceURLWithImage (text) { var a = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0 ...
- 【改】iOS学习之NSAttributedString(富文本)
NSAttributedString 叫做富文本,是一种带有属性的字符串,通过它可以轻松的在一个字符串中表现出多种字体.字号.字体大小等各不相同的风格,还可以对段落进行格式化,一般都是对可变富文本(N ...
- 轻量级富文本编辑器wangEditor源码结构介绍
1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...
- iOS学习之NSAttributedString(富文本)
NSAttributedString 叫做富文本,是一种带有属性的字符串,通过它可以轻松的在一个字符串中表现出多种字体.字号.字体大小等各不相同的风格,还可以对段落进行格式化,一般都是对可变富文本(N ...
- 小程序解析html之富文本插件wxParse
近期,开发小程序时,遇到后台给我返回了一串html代码,需要我这边来解析,头疼了好久,网上找资料找了变天,终于找到wxParse,然而看到的都是针对于页面中有单个html或者固定数据的,我现在的问题是 ...
- 富文本(wangEditor框架)的使用教程
富文本的使用教程(wangEditor框架) 一,相信很多人用过很多富文本的框架,现在我向大家推荐一个很实用的一个富文本框架,具有丰富的功能项,容易使用. 所以本博客介绍这个富文本编辑器的使用哈!觉得 ...
- PyQt(Python+Qt)学习随笔:富文本编辑器QTextEdit功能详解
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 一.概述 QTextEdit是一个高级的所见即所得的文档查看器和编辑器 ...
随机推荐
- Docker 运行 MongoDB的简单办法
Docker 运行 MongoDB的简单办法 第一步拉取镜像 docker pull mongo 第二步创建自己的目录 地址 10.24.22.240 创建目录 mkdir /mongodb 第三步 ...
- 使用systemd管理多nginx服务以及单nginx服务实现多vhost访问的操作步骤
背景 nginx是开源的web服务器, 性能与可配置性和插件做的非常完善. 可以使用简单的命令拉起来nginx进行服务提供,但是有时候需要使用keepalive等软件实现保活,以及实现开启启动等,比较 ...
- Prompt learning 教学基础篇:prompt基本原则以及使用场景技巧助力你更好使用chatgpt,得到你想要的答案
Prompt learning 教学[基础篇]:prompt基本原则以及使用场景技巧助力你更好使用chatgpt,得到你想要的答案 如果你想系统学习 如果你对 AI 和 Prompt Engineer ...
- zblog文章采集发布插件-免费下载
推荐一款可以自动采集网页文章,并发布到zblog系统网站的zblog采集发布插件,支持简数采集器,火车头数据采集器,八爪鱼文章采集器,后羿采集器等...... zblog采集发布插件使用教程如下: 1 ...
- 使用easyexcel导入62个字段,十万加行数的excel
使用easyexcel导入62个字段,十万加行数的excel 1️⃣ 准备工作 1. 版本对应 在easyexcel官网的常见问题栏中往下滑找到 2. 下载jar包 maven项目不想多说,在pom. ...
- 宝塔 websocket连接wss配置
https要使用wss连接,wss://xxxxx.com/wss 就转发到了 服务器内的127.0.0.1:2346服务. 具体转发可以放在 文件配置或者 伪静态里面 建议放在伪静态里面容易管理 n ...
- Docker生命周期,一张图秒懂docker
- .NET Core开发实战(第2课:内容综述)--学习笔记
02 | 内容综述 课程目标 掌握 .NET Core 微服务架构的最佳实践 成长为一个具备良好架构设计能力的架构师 课程内容 第一部分 .NET Core 的必备知识 第二部分 .NET Core ...
- JS Leetcode 503. 下一个更大元素 II 题解分析,依旧单调栈做法解决此题
壹 ❀ 引 我在JS Leetcode 496. 下一个更大元素 I 更清晰的图解单调栈做法一文中,介绍了单调栈做法解决下一个更大元素的问题,比较巧的是这道题还有升级版,题目来自Leetcode503 ...
- FireFox 报错Security Connection Failed解决方案
1.在浏览器中输入:about:config; 2.搜索security.ssl.enable_ocsp_stapling,双击将其修改为FALSE: 3.返回重新访问之前的网站,问题解决