快速了解JavaScript富文本编辑

命令

作用

可选值

backColor

设置文档背景颜色。在styleWithCss模式下，则只影响容器元素的背景颜色。

颜色值字符串（IE使用这个命令设置文本背景色）

bold

切换选中文本的粗体样式

null

copy

将选中内容复制到剪贴板

null

createLink

将选中内容转换为指向给定URL的链接

URL链接值，至少包含一个字符

cut

将选中内容剪切到剪贴板

null

delete

删除选中的内容

null

fontName

将选中文本改为使用指定字体

字体名(例如："Arial")

fontSize

将选中文本改为指定字体大小

提供HTML字体尺寸(1-7)

foreColor

将选中文本改为指定颜色

颜色值字符串

formatBlock

将选中文本包含在指定的HTML标签中

提供HTML标签，如

indent

缩进文本

null

insertHorizontalRule

在光标位置插入元素

null

insertImage

在光标位置插入图片

图片的URL链接

insertOrderedList

在光标位置插入元素

null

insertunorderedlist

在光标位置插入

该方法用于确定对当前选中文本或光标所在位置是否可以执行相关命令。true 指令可用，false 不可用。如下所示：

let result = document.queryCommandEnabled("selectAll");

但要注意，返回 true 并不代表允许执行相关命令，只代表当前选区适合执行相关命令。在 Firefox 中，queryCommandEnabled("cut") 即使默认不允许剪切也会返回 true。

document 还提供 queryCommandState() 方法：

queryCommandState(commandId: string): boolean;

该方法用于确定相关命令是否应用到了当前文本选区。如下所示：

let isBold = document.queryCommandState("selectAll");

富文本编辑器可以利用这个方法更新粗体、斜体等按钮。

在介绍一下 queryCommandValue() 方法：

queryCommandValue(commandId: string): string;

这个方法用于返回执行命令时使用的值，参考 execCommand() 方法使用的第三个参数。如下所示，如果一段选中文本应用了值为 5 的 "fontsize" 命令，使用该方法会返回 5：

let fontSize = document.queryCommandValue("fontsize");

这个方法可用于确定如何将命令应用于文本选区，从而进一步决定是否需要执行下一个命令。

富文件选区

Selection 对象表示用户选中的文本范围或光标的位置，它代表页面中的文本选区。可以使用 window 或 document 对象调用 getSelection() 方法获取文本选区。Selection 对象拥有以下属性。

Selection 的属性并没有包含很多有用的信息。好在它的以下方法提供了更多信息，并允许操作选区。

下面介绍一个例子，是使用 Selection 对象实现选中文本高亮：

function highlight() {
    let selection = document.getSelection();
    // 取得表示选区的范围
    let range = selection.getRangeAt(0);
    // 高亮选中的文本
    let span = document.createElement("span");
    span.style.backgroundColor = "yellow";
    // 给选中文本添加背景为黄色的标签
    range.surroundContents(span);
}

效果如下：

快速了解JavaScript富文本编辑

通过表单提交富文本

因为富文本编辑不是在表单控件中实现，这意味着要将富文本编辑结果提交给服务器，就要手动进行。我们会在表单中添加一个 type="hidden" 的字段，在提交表单时，通过监听器，从元素中提取出 HTML 并插入隐藏字段中。如下所示：

// form 实例是`` 元素，可以使用DOM获取
form.addEventListener("submit", (event) => {
    let target = event.target;
    target.elements["content"].value = frames["editor"].document.body.innerHTML;
});

上述从编辑器中获取了 HTML 后，将其插入名为 content 的字段中。下面是对于 contenteditable 元素实现的方式：

这里，代码使用文档主体的 innerHTML 属性取得了 iframe 的 HTML，然后将其插入名为 "comments" 的表单字段中。这样做可以确保在提交表单之前给表单字段赋值。如果使用 submit() 方法手工提交表单，那么要注意在提交前先执行上述操作。对于 contenteditable 元素，执行这一操作的代码是类似的：

// form 实例是`` 元素，可以使用DOM获取
form.addEventListener("submit", (event) => {
    let target = event.target;
    target.elements["content"].value = document.getElementsByClassName("editor")[0].innerHTML;
});

总结

本文介绍了实现富文本编辑器有两种方式：使用 iframe 和 contenteditable 属性。介绍了使用 document.execCommand() 方法来实现加粗、斜体样式等功能，还有一些相应的功能。而且富文本编辑的内容要上传到服务器，还要将内容先复制到表单中的一个字段上，然后在提交。

免责声明：由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权，根据《信息网络传播权保护条例》，如我们转载的作品侵犯了您的权利,请您通知我们，请将本侵权页面网址发送邮件到qingge@88.com，深感抱歉，我们会做删除处理。

快速了解JavaScript富文本编辑

相关阅读