wangEditor富文本编辑器的简单使用
介绍
wangEditor是一个轻量级 web 富文本编辑器,配置方便,使用简单。
官网:www.wangEditor.com
文档:www.wangeditor.com/doc
源码:github.com/wangeditor-team/wangEditor
用于 Vue 和 React
在 Vue 中使用 wangEditor
vue3 可参考 wangEditor-with-vue3
vue2 可参考 wangEdior-with-vue 。
在 React 中使用 wangEditor
如果要自己动手开发,可参考 wangEditor-with-react 。
如果想要用现成的插件,可参考 wangeditor-for-react 。
下载
下载
npm 安装 npm i wangeditor --save
CDN 链接 https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js
基本使用
NPM
npm i wangeditor --save
安装后几行代码即可创建一个编辑器:
import E from "wangeditor"
const editor = new E("#div1")
editor.create()
常用的设置
设置编辑区域的高度
编辑区域高度默认为 300px ,可通过以下方式修改。
const editor = new E('#div1')// 设置编辑区域高度为 500px
editor.config.height = 500// 注意,先配置 height ,再执行 create()
editor.create()
菜单和编辑区域分离
菜单和编辑区域其实就是两个单独的
<head><style>.toolbar {border: 1px solid #ccc;}.text {border: 1px solid #ccc;min-height: 400px;}</style>
</head>
<body><p>container 和 toolbar 分开</p><div><div id="toolbar-container" class="toolbar"></div><p>------ 我是分割线 ------</p><div id="text-container" class="text"></div></div><!-- 引入 wangEditor.min.js --><script>const E = window.wangEditorconst editor = new E('#toolbar-container', '#text-container') // 传入两个元素editor.create()</script>
</body>
一个页面多个编辑器
在页面只使用一个编辑器时可以使用ref获取页面元素,页面有两个编辑器的时候用id获取页面元素。
<head><style type="text/css">.toolbar {background-color: #f1f1f1;border: 1px solid #ccc;}.text {border: 1px solid #ccc;height: 200px;}</style>
</head>
<body><div id="div1" class="toolbar"></div><div style="padding: 5px 0; color: #ccc">中间隔离带</div><div id="div2" class="text"><p>第一个 demo(菜单和编辑器区域分开)</p></div><div id="div3"><p>第二个 demo(常规)</p></div><!-- 引入 wangEditor.min.js --><script type="text/javascript">const E = window.wangEditorconst editor1 = new E('#div1', '#div2')editor1.create()const editor2 = new E('#div3')editor2.create()</script>
</body>
如果在控制台报错“找不到节点”,要注意是不是使用了v-if将页面元素隐藏了导致获取不到DOM节点。两个编辑器要注意命名冲突和使用位置。
设置内容
html 初始化内容(尽量使用这种方式)
直接将内容写到要创建编辑器的
<div id="div1"><p>初始化的内容</p><p>初始化的内容</p>
</div><!-- 引入 wangEditor.min.js -->
<script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')editor.create()
</script>
js 设置内容
创建编辑器之后,使用 editor.txt.html(…) 设置编辑器内容。
<div id="div1">
</div><!-- 引入 wangEditor.min.js -->
<script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')editor.create()editor.txt.html('<p>用 JS 设置的内容</p>') // 重新设置编辑器内容
</script>
追加新内容
创建编辑器之后,可使用 editor.txt.append('<p>追加的内容</p>')
继续追加内容。
获取 html
使用 editor.txt.html() 获取 html 。
需要注意的是:从编辑器中获取的 html 代码是不包含任何样式的纯 html。
获取 text
使用 editor.txt.text() 获取 text 文本。
清空内容
可使用 editor.txt.clear() 清空编辑器内容。
wangEditor富文本编辑器的简单使用相关推荐
- 示例演示公告通知标题无缝向上滚动,文字段落无缝向上滚动,简单的wangeditor富文本编辑器,简单的音乐播放demo...
用于工作需求接触了公告通知标题内容的无缝向上滚动功能以及使用简单的wang富文本编辑器配置简单的音乐插件demo. 在写之前要先引入相应的js,jquery: 首先是通知标题的无缝向上滚动,这个网上很 ...
- 【wangEditor富文本编辑器】富文本三种使用方法,html使用富文本,html套vue脚手架使用富文本,vue使用富文本【简单易用,复制即用】
前言 富文本编辑器功能是很多人都要使用的 市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受. 我最近做了一个需求,是需要在html文件上写富文本编辑器. 但是我看了以前用的 ...
- 更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
- wangeditor富文本编辑器的使用(超详细)
一.基本介绍 官方文档:http://www.wangeditor.com/ 1.wangeditor富文本编辑器的特点 基于javascript和css开发的 Web富文本编辑器, 轻量.简洁.易用 ...
- wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
- css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法
从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案 从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...
- 集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...
- wangEditor富文本编辑器使用、编辑器内容转json格式
wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app.小程序使用 wangEditor官网 wangEditor官方文档 wangEditor官方下载 下载好之后 ...
- 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
- wangEditor 富文本编辑器使用
wangEditor 富文本编辑器使用 框架: react hooks 链接: 官方文档参考 富文本编辑器组件 import '@wangeditor/editor/dist/css/style.cs ...
最新文章
- PTA数据结构与算法题目集(中文)7-39
- 可执行SQL文的mybatis工具类
- String indexOf 算法
- 柱状图添加数字标签_Python之利用Plotnine作图(一)——简单柱状图
- 20155320《网络对抗》Exp4 恶意代码分析
- 【STL基础】list
- hadoop学习笔记-目录
- 转:FileReader详解与实例---读取并显示图像文件
- 页面中超长字段只显示部分
- java win10_java下载64位win10-javawin10 64位下载8.0.1210.13官方版-西西软件下载
- windows命令大全
- Android小插件 —— 天气插件
- 数学建模——层次分析法(Matlab)【评价类问题】
- 关于一元线性回归、自相关性与Stata实现
- java 时间处理工具类
- js实现数组按拼音排序
- 【读书笔记】《我的奋斗》罗永浩
- 调用链根因定位论文《Root Cause Analysis of Anomalies of Multitier Services in Public Clouds》
- SaaS ToB产品的易用性设计2
- 《RFID原理及应用》期末复习总结(6)
热门文章
- Win7 SP1 安装python 3.8时,提示 KB2533623 update is required to continue
- cad计算机土方软件,飞时达土方计算软件FastTFT
- IDEA格式化SQL代码
- VS中的scanf_s函数和scanf
- MATLAB代码:全面ADMM算法代码,实现了三种ADMM迭代方式 参考文档:《基于串行和并行ADMM算法的电_气能量流分布式协同优化_瞿小斌》
- 高级操作系统——XV6进程管理
- 台式计算机提示内存不足怎么办,台式电脑提示内存不足怎么回事
- 使用云存储解决方案,主要有哪些优势
- 零基础自学SQL课程 | SQL中的日期函数大全
- html写自动关机的代码,让电脑自动关机代码是什么