JavaScript实现富文本编辑
0 Views 前端 with
本文字数:1,663 字 | 阅读时长 ≈ 6 min

JavaScript实现富文本编辑

0 Views 前端 with
本文字数:1,663 字 | 阅读时长 ≈ 6 min

本文主要讲述JavaScript实现富文本编辑的相关知识点

1、contenteditable=”true”

让一个 div 成为可编辑状态,加入contenteditable="true" 属性即可。

1
2
3
<div class="rich-editor" contenteditable="true">
<p>javascript实现可编辑富文本</p>
</div>

2、selection 对象

Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。

获得一个 selection 对象

1
var selection = window.getSelection();

通常情况下我们不会直接操作 selection对象,而是需要操作用 seleciton 对象所对应的用户选择的 ranges (区域),俗称”拖蓝“。获取方式如下:

1
var range = selection.getRangeAt(0);

由于浏览器当前可能存在多个文本选取,所以 getRangeAt 函数接受一个索引值。在富文本编辑其中,我们不考虑多选取的可能性。

selection对象还有两个重要的方法, addRangeremoveAllRanges。分别用于向当前选取添加一个 range 对象和 删除所有 range 对象。之后你会看到他们的用途。

3、range 对象

通过 selection 对象获得的 range对象才是我们操作光标的重点。Range表示包含节点和部分文本节点的文档片段。

光标位置如图所示:

其中属性含义如下:

这里我们的 startContainer , endContainer, commonAncestorContainer都为 #text 文本节点 ‘javascript实现可编辑富文本’。因为光标在‘可‘字后面,所以startOffsetendOffset均为 13。且没有产生拖蓝,所以 collapsed 的值为 true。我们再看一个产生拖蓝的例子:

由于产生了拖蓝 startContainerendContainer 不再一致,collapsed的值变为了 false。startOffset 和 endOffset 正好代表了拖蓝的起终位置。更多的效果大家自己尝试吧。

操作一个 range 节点,主要有如下方法:

富文本编辑里面常用的就这么多,还有很多方法就不列举了。

4、修改光标位置

我们可以通过调用 setStart()setEnd() 方法,来修改一个光标的位置或拖蓝范围。这两个方法接受的参数为各自的起终节点和偏移量。例如我想让光标位置到”javascript实现可编辑富文本”最末尾,那么可以采用如下方法:

1
2
3
4
var range = window.getSelection().getRangeAt(0),
textEle = range.commonAncestorContainer;
range.setStart(range.startContainer, textEle.length);
range.setEnd(range.endContainer, textEle.length);

5、修改文本格式

实现富文本编辑器,我们就要能够有修改文档格式的能力,比如加粗,斜体,文本颜色,列表等内容。DOM 为可编辑区提供了 document.execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。当使用 contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素。语法如下:

1
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

5.1、返回值

一个 Boolean ,如果是 false 则表示操作不被支持或未被启用。

5.2、参数

一个 DOMString ,命令的名称。

一个 Boolean, 是否展示用户界面,一般为 false。Mozilla 没有实现。

一些命令(例如insertImage)需要额外的参数(insertImage需要提供插入image的url),默认为null。

5.3、具体方法

1、〖全选〗命令的实现
[格式]:document.execCommand(”selectAll”)
[说明]将选种网页中的全部内容!
[举例]在之间加入:
全选

2、〖打开〗命令的实现
[格式]:document.execCommand(”open”)
[说明]这跟VB等编程设计中的webbrowser控件中的命令有些相似,大家也可依此琢磨琢磨。
[举例]在之间加入:
打开

3、〖另存为〗命令的实现
[格式]:document.execCommand(”saveAs”)
[说明]将该网页保存到本地盘的其它目录!
[举例]在之间加入:
另存为

4、〖打印〗命令的实现
[格式]:document.execCommand(”print”)
[说明]当然,你必须装了打印机!
[举例]在之间加入:
打印

Js代码 下面列出的是指令参数及意义

//相当于单击文件中的打开按钮
document.execCommand(”Open”);

//将当前页面另存为
document.execCommand(”SaveAs”);

//剪贴选中的文字到剪贴板;
document.execCommand(”Cut”,”false”,null);

//删除选中的文字;
document.execCommand(”Delete”,”false”,null);

//改变选中区域的字体;
document.execCommand(”FontName”,”false”,sFontName);

//改变选中区域的字体大小;
document.execCommand(”FontSize”,”false”,sSize|iSize);

//设置前景颜色;
document.execCommand(”ForeColor”,”false”,sColor);

//使绝对定位的对象可直接拖动;
document.execCommand(”2D-Position”,”false”,”true”);

//使对象定位变成绝对定位;
document.execCommand(”AbsolutePosition”,”false”,”true”);

//设置背景颜色;
document.execCommand(”BackColor”,”false”,sColor);

//使选中区域的文字加粗;
document.execCommand(”Bold”,”false”,null);

//复制选中的文字到剪贴板;
document.execCommand(”Copy”,”false”,null);

//设置指定锚点为书签;
document.execCommand(”CreateBookmark”,”false”,sAnchorName);

//将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框;
document.execCommand(”CreateLink”,”false”,sLinkURL);

//设置当前块的标签名;
document.execCommand(”FormatBlock”,”false”,sTagName);

//相当于单击文件中的打开按钮
document.execCommand(”Open”);

//将当前页面另存为
document.execCommand(”SaveAs”);

//剪贴选中的文字到剪贴板;
document.execCommand(”Cut”,”false”,null);

//删除选中的文字;
document.execCommand(”Delete”,”false”,null);

//改变选中区域的字体;
document.execCommand(”FontName”,”false”,sFontName);

//改变选中区域的字体大小;
document.execCommand(”FontSize”,”false”,sSize|iSize);

//设置前景颜色;
document.execCommand(”ForeColor”,”false”,sColor);

//使绝对定位的对象可直接拖动;
document.execCommand(”2D-Position”,”false”,”true”);

//使对象定位变成绝对定位;
document.execCommand(”AbsolutePosition”,”false”,”true”);

//设置背景颜色;
document.execCommand(”BackColor”,”false”,sColor);

//使选中区域的文字加粗;
document.execCommand(”Bold”,”false”,null);

//复制选中的文字到剪贴板;
document.execCommand(”Copy”,”false”,null);

//设置指定锚点为书签;
document.execCommand(”CreateBookmark”,”false”,sAnchorName);

//将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框;
document.execCommand(”CreateLink”,”false”,sLinkURL);

//设置当前块的标签名;
document.execCommand(”FormatBlock”,”false”,sTagName);

Sep 02, 2018
Apr 28, 2018