wangEditor介绍（入门级）

一、什么是富文本编辑器？

相信很多小伙伴都用过富文本编辑器。富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。可以实现很多功能，如改变字体颜色，插入图片视频等，应用十分广泛。市场上主流的编辑器也有不少，如TinyMCE，CKEditor，wangEditor等。每一款都有独特的地方，只有使用过才体会深刻。今天，我们主要介绍wangEditor。因为最近项目中集成了wangEditor，所以作为新手，将使用体会记录如下。

二、wangEditor介绍

wangEditor是一款轻量级 web 富文本编辑器，配置方便，使用简单，开源免费。支持 IE10+ 浏览器。

三、下载

npm i wangeditor --save
或
yarn add wangeditor --save

四、使用

4-1：引用到项目

1.如果是通过npm/yarn 下载wangeditor ；

import E from 'wangeditor'
const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()

2.js外链引用的方式也分两种（在线链接引用和本地资源引用）

<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<!--此处的src也可以是本地资源链接 -->
<script type="text/javascript">
const E = window.wangEditor
const editor = new E("#div1")
// 或者 const editor = new E(document.getElementById('div1'))
editor.create()
</script>

注意：一个页面可创建多个编辑器

//创建多个编辑器
<script>
var E = window.wangEditor
//第一个编辑器
var editor1 = new E('#div1')
editor1.create()
//第二个编辑器
var editor2 = new E('#div2')
editor2.create()
</script>

4-2：分离菜单栏和编辑栏区域

<div id="div3">菜单区</div>
<div>--------------------------------</div>
<div id="div4">编辑区</div><script>
//先实例化wangEditor，再分别用两个DOM渲染菜单区和编辑区var E = window.wangEditorvar editor2 = new E('#div3','#div4')
editor2.create()
</script>

4-3：配置菜单区和编辑区内容

<script>var E = window.wangEditorvar editor1 = new E('#div1')//配置菜单栏// 如果菜单栏宽度不够，建议精简菜单项。editor1.customConfig.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'emoticon', // 表情'image', // 插入图片'table', // 表格'video', // 插入视频'code', // 插入代码'undo', // 撤销'redo' // 重复]// 配置颜色editor1.customConfig.colors = ['#000000',...// 可自行添加]// 配置字体editor1.customConfig.fontNames = ['宋体','微软雅黑','Arial',              ...// 可自行添加]editor1.create()</script>

最后，附上 wangEditor官方文档,更多内容等你探索！

wangEditor介绍（入门级）相关推荐

html下拉列表不居中_HTML介绍——入门级
1.1 HTML简介什么是HTML? HTML 是用来描述网页的一种语言. l HTML 指的是超文本标记语言: Hyper Text Markup Language l HTML 不是一种编程语言 ...
MC我的世界模组-模拟城市-教程
你好,大家可以叫我"大傻",这是我更新的第55篇文章,点赞.在看,养成习惯,点击左上角蓝色字体关注我无与伦比的傻 01 前言这个模组最开始你只有10金,想要获得更多金币第一步你 ...
第九章：深度学习平台及框架
目录 ➢ Part One.深度学习平台概览 ➢一.深度学习平台框架对照 ➢ Part Two.TensorFlow ➢一.TensorFlow的起源 ➢二.TensorFlow中的张量 ➢三.Ten ...
哪些服务器支持 9200系列CPU,56核/112线程：英特尔发布9200系列Xeon Platinum CPU新品...
(题图 via:TechSpot) 首先来介绍入门级的 Xeon Platinum 9221,其采用了 32 核 / 64 线程的设计,默频 2.1GHz.拥有 71.5MB 缓存.热设计功耗(TDP ...
一维数组c语言,c语言一维数组_C语言一维数组入门教程
摘要腾兴网为您分享:C语言一维数组入门教程,优衣库,小米手环,小米钱包,小度等软件知识,以及胎教宝典,一级建造师题库软件,康佳渠道,刷点卷,一加系统,音乐节拍器,liveuc视频会议,辽宁省政务服务 ...
商业流程服务BPass你真的了解吗？
商业流程服务(BPaaS)是一项云资源的审批流程服务,可以帮助您管理账号下的资源申请与分配.您无需创建多个腾讯云账号来管理不同业务的资源,而是在一个腾讯云账号下管理和分配资源.管理员创建不同的资源审批 ...
c语言用一维数组存储数据,C语言一维数组入门教程
本文章来简单的介绍入门级的c语言入门教程,下面我来介绍C语言一维数组的使用方法,包括有一维数组,数组的引,数组的遍历用,数组的初始化等. 一.一维数组 1.定义一个一维数组: (1)格式:存储类别 ...
apache-POI ，easyexcel（3个办公软件）
POI介绍 ApachePOI是用Java编写的免费开源的跨平台的JavaAPI,ApachePOI提供API给Java程序对MicrosoftOffice格式档案读和写的功能,其中使用最多的就是使用 ...
UML类图新手入门级介绍
UML类图新手入门级介绍看了大话设计模式,觉得很生动形象,比较适合于我这种初学者理解面向对象,所以就记录了一下. 举一个简单的例子,来看这样一副图,其中就包括了UML类图中的基本图示法. 首先,看动 ...

wangEditor介绍（入门级）

一、什么是富文本编辑器？

二、wangEditor介绍

三、下载

四、使用

4-1：引用到项目

4-2：分离菜单栏和编辑栏区域

4-3：配置菜单区和编辑区内容

wangEditor介绍（入门级）相关推荐

最新文章

热门文章

wangEditor介绍（入门级）

一、什么是富文本编辑器？

二、wangEditor介绍

三、下载

四、使用

4-1： 引用到项目

4-2：分离菜单栏和编辑栏区域

4-3：配置菜单区和编辑区内容

wangEditor介绍（入门级）相关推荐

最新文章

热门文章

4-1：引用到项目