这个原理实在是太简单了!对于支持富文本编辑的浏览器来说,其实就是设置 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>
分享到:
相关推荐
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则是一款强大的...