wangEditor介绍(入门级)

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外链引用的方式也分两种(在线链接引用和本地资源引用)

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

//创建多个编辑器

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

菜单区

--------------------------------

编辑区

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

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

相关推荐

一个有意思的家政行业-好慷在家

一个有意思的家政行业-好慷在家

bei365官网 07-04
阅读更多
网咖如何经营 网咖靠什么赚钱

网咖如何经营 网咖靠什么赚钱

bei365官网 07-10
阅读更多
小米电视内置软件卸载必看的-系统应用对照表

小米电视内置软件卸载必看的-系统应用对照表

bei365官网 07-09
阅读更多