`
dingjun1
  • 浏览: 213633 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML富文本编辑ZZ

阅读更多
这个原理实在是太简单了!对于支持富文本编辑的浏览器来说,其实就是设置 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

    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的使用

    ### Linux文本编辑器vi的使用 #### 一、vi编辑器概述 vi是Linux乃至UNIX中最常用且功能强大的文本编辑器之一。对于Linux系统管理员来说,掌握vi编辑器的使用至关重要,因为它几乎适用于所有类型的文本文件编辑,...

    Linux下最基本的文本编辑器vi使用方法

    Linux 下最基本的文本编辑器 vi 使用方法 vi 编辑器是 Unix 和 Linux 操作系统下最基本的文本编辑器,具有三种工作模式:指令模式、输入模式、末行模式。用户可以通过输入特定的命令在不同模式之间切换。下面是 vi ...

    linux vi文本编辑器

    ### Linux VI文本编辑器:深度解析与操作指南 在Linux操作系统中,VI(Visual Editor)是一种功能强大且广泛使用的文本编辑器。对于任何Linux用户或系统管理员而言,掌握VI编辑器的基本操作是至关重要的技能之一。...

    Linux文本编辑器-vim.pdf

    "Linux文本编辑器Vim的使用和应用" Linux文本编辑器Vim是一个功能丰富且强大的文本编辑器,被广泛用于Linux系统。它是Vi的增强版本,提供了更多的功能和改进,同时可以通过插件扩展其功能。Vim提供了三种模式:命令...

    程序员的编辑器——VIM(zz) - 饮水思源

    VIM(Vi IMproved)是Linux世界中广受欢迎的文本编辑器,对于程序员来说,它不仅是一个工具,更是一种高效的工作方式。这篇文章将深入探讨VIM的使用技巧和重要概念,帮助你提升编辑效率。 首先,VIM的操作模式是其...

    vim文本编辑1

    【vim文本编辑1】 vim(Vi IMproved)是一款在UNIX、Linux及类UNIX操作系统中广泛使用的全屏幕文本编辑器,它是vi(Visual Editor)编辑器的增强版本,完全兼容vi,同时增加了许多实用的功能和改进。vim编辑器以其...

    vi全屏幕编辑器常用命令 vi全屏幕编辑器常用命令

    Vi 编辑器是 Unix 操作系统中的一种常用的文本编辑器,它具有强大的编辑功能和灵活的使用方式。下面是 Vi 编辑器中常用的命令和操作: 基本命令 * 进入 Vi 编辑器:`vi` 或 `vi filename` * 退出 Vi 编辑器:`:q` ...

    ZZ561401.CAB

    ZZ561401.CAB ZZ561401.CAB ZZ561401.CAB

    wincc AX NF ZZ

    wincc SIMATIC WinCC是第一个使用最新的32位技术的过程监视系统,具有良好的开放性和灵活性。 从面市伊始,用户就对SIMATIC WinCC印象深刻。

    超出NLO QCD的高横向动量的ZZ产生

    我们研究了四轻子最终状态ℓ+ℓ-ℓ+ℓ-的产生,这些状态主要由一对弱电Z玻色子ZZ产生。 使用LoopSim方法,我们合并ZZ和ZZ + jet的NLO QCD结果,并获得ZZ产生的近似NNLO预测。 还包括对ZZ过程的精确胶子融合环平方的...

    利用C语言程序编辑GDSII文件(zz).pdf

    利用C语言程序编辑GDSII文件(zz).pdf

    zz CAD快速计算长度插件

    在CAD中想要快速测量长度,在CAD工具栏找到加载应用程序,再点击加载 加载成功后在输入栏输入“zz”(不分大小写)在选择你需要测量的线段即可。

    Zz归零.LSP

    cad标高归零,好用的

    百度编辑器【jsp版-uft8】ueditor1.4.3.3+umeditor1.2.2+umeditor1.2.3合集

    百度编辑器是一款广泛应用于网页内容编辑的开源富文本编辑器,尤其在Java Web开发中深受喜爱。这个压缩包集合包含了不同版本的百度编辑器,包括ueditor1.4.3.3、umeditor1.2.2、umeditor1.2.3以及ueditor的列表资源...

    DjangoUeditor2-master.zip

    【DjangoUeditor2-master.zip】是一个包含Django项目的压缩包,该项目集成了百度的富文本编辑器——UEditor。Django是一个用Python编写的高级Web框架,它鼓励快速开发和干净、实用的设计,而UEditor则是一款强大的...

Global site tag (gtag.js) - Google Analytics