这个原理实在是太简单了！对于支持富文本编辑的浏览器来说，其实就是设置 document 的 designMode 属性为 on 后，再通过执行 document.execCommand('commandName'[, UIFlag[, value]]) 即可。commandName 和 value 可以在 MSDN 上和MDC 上找到，它们就是我们创建各种格式的命令，比方说，我们要加粗字体，执行 document.execCommand('bold', false) 即可。很简单是吧？但是值得注意的是，通常是选中了文本后才执行命令，被选中的文本才被格式化。对于未选中的文本进行这个命令，各浏览器有不同的处理方式，比方 IE 可能是对位于光标中的标签内容进行格式化，而其它浏览器不做任何处理，这超出本文的内容，不细述。同时需要注意的是，UIFlag 这个参数设置为 true 表示 display any user interface triggered by the command (if any), 在我们今天的教程中都是 false, 而 value 也只在某些 commandName 中才有，具体参考以上刚给出的两个链接。
为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素，然后对这个 iframe 内的 document（通过 iframe.contentWindow.document 获得）进行操作。
十分简单，是吧？下面我们来动手做一个。
<script language="javascript">
var editor;
editor = document.getElementById("HtmlEdit").contentWindow;
//只需键入以下设定，iframe立刻变成编辑器。
editor.document.designMode = 'On';
editor.document.contentEditable = true;
//但是IE与FireFox有点不同，为了兼容FireFox，所以必须创建一个新的document。
editor.document.open();
editor.document.writeln('<html><body></body></html>');
editor.document.close();
//字体特效 － 加粗方法一
function addBold()
{
editor.focus();
//所有字体特效只是使用execComman()就能完成。
editor.document.execCommand("Bold", false, null);
}
//字体特效 － 加粗方法二
function addBold()
{
editor.focus();
//获得选取的焦点
var sel = editor.document.selection.createRange();
insertHTML("<b>"+sel.text+"</b>");
}
function insertHTML(html)
{
if (editor.document.selection.type.toLowerCase() != "none")
{
editor.document.selection.clear() ;
}
editor.document.selection.createRange().pasteHTML(html) ;
}
</script>
分享到：
相关推荐
### 文本编辑器Vim详解 #### 一、引言 Vim（Vi Improved）是一款在Linux/UNIX系统中广泛使用的高效文本编辑器。作为一款功能强大且历史悠久的工具，Vim不仅支持基本的文本编辑功能，还具备高度可定制性，支持多种...
base zz zz zz zz zz base zz zz zz zz zz base zz zz zz zz zz base zz zz zz zz zz
### Linux文本编辑器vi的使用 #### 一、vi编辑器概述 vi是Linux乃至UNIX中最常用且功能强大的文本编辑器之一。对于Linux系统管理员来说，掌握vi编辑器的使用至关重要，因为它几乎适用于所有类型的文本文件编辑，...
Linux 下最基本的文本编辑器 vi 使用方法 vi 编辑器是 Unix 和 Linux 操作系统下最基本的文本编辑器，具有三种工作模式：指令模式、输入模式、末行模式。用户可以通过输入特定的命令在不同模式之间切换。下面是 vi ...
### Linux VI文本编辑器：深度解析与操作指南 在Linux操作系统中，VI（Visual Editor）是一种功能强大且广泛使用的文本编辑器。对于任何Linux用户或系统管理员而言，掌握VI编辑器的基本操作是至关重要的技能之一。...
"Linux文本编辑器Vim的使用和应用" Linux文本编辑器Vim是一个功能丰富且强大的文本编辑器，被广泛用于Linux系统。它是Vi的增强版本，提供了更多的功能和改进，同时可以通过插件扩展其功能。Vim提供了三种模式：命令...
VIM（Vi IMproved）是Linux世界中广受欢迎的文本编辑器，对于程序员来说，它不仅是一个工具，更是一种高效的工作方式。这篇文章将深入探讨VIM的使用技巧和重要概念，帮助你提升编辑效率。 首先，VIM的操作模式是其...
【vim文本编辑1】 vim（Vi IMproved）是一款在UNIX、Linux及类UNIX操作系统中广泛使用的全屏幕文本编辑器，它是vi（Visual Editor）编辑器的增强版本，完全兼容vi，同时增加了许多实用的功能和改进。vim编辑器以其...
Vi 编辑器是 Unix 操作系统中的一种常用的文本编辑器，它具有强大的编辑功能和灵活的使用方式。下面是 Vi 编辑器中常用的命令和操作： 基本命令 * 进入 Vi 编辑器：`vi` 或 `vi filename` * 退出 Vi 编辑器：`:q` ...
ZZ561401.CAB ZZ561401.CAB ZZ561401.CAB
wincc SIMATIC WinCC是第一个使用最新的32位技术的过程监视系统,具有良好的开放性和灵活性。 从面市伊始,用户就对SIMATIC WinCC印象深刻。
我们研究了四轻子最终状态ℓ+ℓ-ℓ+ℓ-的产生，这些状态主要由一对弱电Z玻色子ZZ产生。 使用LoopSim方法，我们合并ZZ和ZZ + jet的NLO QCD结果，并获得ZZ产生的近似NNLO预测。 还包括对ZZ过程的精确胶子融合环平方的...
利用C语言程序编辑GDSII文件(zz).pdf
在CAD中想要快速测量长度，在CAD工具栏找到加载应用程序，再点击加载 加载成功后在输入栏输入“zz”（不分大小写）在选择你需要测量的线段即可。
cad标高归零，好用的
百度编辑器是一款广泛应用于网页内容编辑的开源富文本编辑器，尤其在Java Web开发中深受喜爱。这个压缩包集合包含了不同版本的百度编辑器，包括ueditor1.4.3.3、umeditor1.2.2、umeditor1.2.3以及ueditor的列表资源...
【DjangoUeditor2-master.zip】是一个包含Django项目的压缩包，该项目集成了百度的富文本编辑器——UEditor。Django是一个用Python编写的高级Web框架，它鼓励快速开发和干净、实用的设计，而UEditor则是一款强大的...