如何打造属于自己的轻量级富文本编辑器?

实例描述

在网页上，普通的文本框（）或者文本域（）只能输入纯文本的内容。如果想要编辑一些带加粗、斜体、下线划、删除线效果的文本或者插入表情符号就不行了。这时，就得需要富文本编辑器。网络中有很多开源的富文本编辑器。但是这些富文本编辑器通常功能完备、复杂。有些功能并不一定都是我们想要的，那么，我们能不能给它减减负呢？从而打造一款属于自己的轻量级的富文本编辑器。

技术要点

HTML中，使用contenteditable属性可以指定元素内容是否可编辑。contenteditable属性值为布尔类型，可以是true或false。值为true时，表示元素将变为可编辑状态；为false时，表示元素不可编辑。语法格式如下：

例如，设置一个div元素为可编辑，代码如下：

具体实现

第一步准备表情图标文件，如图1所示。

图1 表情图标文

第二步样式工具栏图标文件，如图2所示。

图2样式工具栏图标文件

第三步在页面中添加HTML代码。其中包括以下内容：

þ一个用于显示表情符号的标签；

þ一个用于显示样式工具栏的列表（使用和标签）；

þ一个作为编辑框的标签，该标签需要设置contenteditable属性值为true；

þ一个用于显示提交按钮的标签，在该标签内是一个超链接标签实现提交按钮。

代码如下：

01html>

02

03

07 style="background-image: url('bg_01.jpg');background-repeat: no-repeat;padding: 30px 46px;">

08

style="padding-bottom: 10px;">

09

src="face/face1.png"width="32px"height="32px">

10

src="face/face2.png"width="32px"height="32px">

11

src="face/face3.png"width="32px"height="32px">

12

src="face/face4.png"width="32px"height="32px">

13

src="face/face5.png"width="32px"height="32px">

14

src="face/face6.png"width="32px"height="32px">

15

src="face/face7.png"width="32px"height="32px">

16

src="face/face8.png"width="32px"height="32px">

17

src="face/face9.png"width="32px"height="32px">

18

src="face/face10.png"width="32px"height="32px">

19

src="face/face11.png"width="32px"height="32px">

20

src="face/face12.png"width="32px"height="32px">

21

src="face/face13.png"width="32px"height="32px">

22

23

29

contenteditable="true"id="editer"spellcheck="true">

30

style="text-align: center;width: 500px;">href="#"id="ok"style="color:dodgerblue;size: 14pt;">提交

31

32

第四步 为页面中的HTML元素添加样式，代码如下：

01

第五步导入jQuery库，编写JavaScript代码，为工具栏按钮添加相应的功能，代码如下：

01

02

运行程序，将显示如图3所示的富文本编辑器。

图3初始运行结果

编辑自己想要的内容，效果如图4所示。

图4编辑内容后的效果

对于富文编辑器你有什么需求呢？试着动手实现一下吧！