突破在线编辑器任意设置字号

HTML在线编辑器相信大家见得多了,有些流行的在线编辑器具有很丰富的功能。但美中不足的是,现有的HTML在线编辑器设置字号大小通常只限于1-7号字而已,不能更好地满足人们的需要。能不能实现像Word那样任意地设置字号大小呢?经过长时间的攻关,Bound0终于可以肯定地回答这个问题了,呵呵呵!请大家共同分享此“Eureka之喜悦”吧!

我们通常所见的内嵌在网页中的HTML在线编辑器,其核心本质是一个IFRAME

例如:

<IFRAME id="Editor" Name="Editor" style="WIDTH: 550; HEIGHT: 480"></IFRAME>

令 Editor.document.designMode="ON";

此时这个IFRAME就是一个设计模式的HTML编辑器了,可以通过脚本

Editor.document.selection.createRange().execCommand(command)

对选中的内容执行command,进行编辑操作。

由于浏览器本身提供的编辑功能非常有限,因此现在流行的HTML在线编辑器大都进行了一些扩展。

在本文发表之前,HTML在线编辑器在设计模式下的字号(字体大小)任意设定功能尚无成功实现,本文所述技术不仅在此方面实现了零的突破,还对HTML在线编辑器的其他扩展功能的实现作出了广泛的启示。

现在流行的HTML在线编辑器的功能可以说已经很丰富了,为什么唯独任意设置字体大小这个看起来并不华丽的功能没有被做出来呢?让我们先来了解一下其中的原因好了:

假设编辑区的HTML内容(Editor.document.body.innerHTML)是:

<H1>逍遥主义者的宣言</H1>

<H3>十个小老头
<BR>朱氵太子
</H3>

<P>我们不是败家浪子,我们从不游手好闲;我们不是无用书生,我们从不怨天忧地;我们不是嬉皮士,我们从不玩世不恭;我们不是妄想家,我们从不脱离实际;我们不是阿Q,我们从不麻木颓废;我们不是狂人,我们从不争风吃醋。我们是创造者,我们是改变者,我们是革命者。我们不是在不幸中去幻想幸福的人,我们甚至不是去追求、寻找幸福的人,我们是自己制造幸福的人,我们是快乐的发源者。首先,在我们经历必当经历的经历时,我们不允许自己不快乐!这就是,逍遥主义的真谛。</P>

<P><BIG>将你的梦打开,填进我的希望。谁都不必介怀,一点点的分量。面对别人述说,命运烛转轮回,世间天空海阔,种种因缘寂晦……</BIG></P>

假设选中的是红色的部分,则Editor.document.selection.createRange().htmlText的内容是:

<P>者。我们不是在不幸中去幻想幸福的人,我们甚至不是去追求、寻找幸福的人,我们是自己制造幸福的人,我们是快乐的发源者。首先,在我们经历必当经历的经历时,我们不允许自己不快乐!这就是,逍遥主义的真谛。</P>

<P><BIG>将你的梦打开,填进我</BIG></P>

看见多出来几个蓝色的标签了吧?产生这种现象是因为:“任何时候,document.selection.createRange().htmlText取出来的html代码都是完整成对的,即使当前选中的内容横跨了几个不同的标签”(卖坏梨语),所以IE会自作主张地把不完整的标签补齐。

就是因为这个原因,当选中的内容在Editor.document.body.innerHTML中对应的代码包含不完整的标签时,在Editor.document.selection.createRange()上做pasteHTML可能会吃不进去(有不完整的<table>等时),或者出现明显的BUG。

而现在的HTML在线编辑器所提供的除了基本的Editor.document.selection.createRange().execCommand(command)之外的各种功能几乎都是通过在Editor.document.selection.createRange()上做pasteHTML来实现的。所以字号的自由设定才始终没能实现。

一切关于“问题的解决之道”的方法论都不外乎是“变通”二字的某种讲法。

时间: 2024-09-25 23:34:32

突破在线编辑器任意设置字号的相关文章

ASP FCKeditor在线编辑器使用方法_网页编辑器

本文使用的是最新的FCKeditor 2.3.1版本 官方网站下载: http://ckeditor.com/download[建议直接在官方网站下载最新版本] 下面就开始用了: 第一项工作就是对这个功能宏大的编辑器进行精简,当然是文件精简而非功能精简化.在这里我以asp版的FCKeditor为例进行,进入到FCKeditor 文件夹下,先把以"_"为开头的文件夹统统删除,这些文件夹里放的是范例或是一些其它工具.其实也就是只保留editor文件夹.fckconfig.js.fckedi

ASP.NET中FCKEDITOR在线编辑器的用法_网页编辑器

你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹中编辑器BasePath参数,如下所示: oFckeditor.BasePath="/Components/fckeditor/"; 另外,FCKEDITOR文件夹中所有以下划线开头的文件夹及文件,都是可选的,可以安全的从你的发布中删除.它们并不是编辑器运行时必需的 如何将FCKEDITOR整合进我的页面? 由于目前的版本提供的FC

在PHP环境下配置在线编辑器FCKeditor

在线 [摘 要] 在线编辑器2.0版确实比1.6版有了许多的改进.首先是FCKeditor的文件结构更加清晰,可以更方便地将其部署在自己的系统中.另外2.0版终于支持了Firefox 1.0浏览器,这将为FCKeditor赢得更多的使用者. 在线编辑器FCKeditor 2.0PHP环境下试用小记 一.简介 2004年11月30日推出了FCKeditor 2.0 RC1版,据其官方网站称:这是FCKeditor 2.0版的第一个稳定版本.大家现在可以考虑正式使用它了.目前支持的后台语言有ASP.

PHP环境下配置在线编辑器FCKeditor

在线编辑器FCKeditor 2.0PHP环境下试用小记 一.简介 2004年11月30日推出了FCKeditor 2.0 RC1版,据其官方网站称:这是FCKeditor 2.0版的第一个稳定版本.大家现在可以考虑正式使用它了.目前支持的后台语言有ASP.ASP.Net.PHP和ColdFusion. 笔者在经过简单的试用发现,在线编辑器2.0版确实比1.6版有了许多的改进.首先是FCKeditor的文件结构更加清晰,可以更方便地将其部署在自己的系统中.另外2.0版终于支持了Firefox 1

HTML在线编辑器的调用方法和使用方法详解

详解|在线 HTML在线编辑器不需要懂得使用Dreamweaver,会用Word就会使用此编辑器,在文章系统或者是新闻系统需要文字编辑的web程序中非常实用. 但是如何将html编辑器嵌入到web页中和怎么取得里面的数据呢?! 首先我们假定我们所要调用得HTML在线编辑器放在一个单独得页面中,文件名是gledit.htm. HTML在线编辑器有两种基本调用方法: 一.使用object调用: 1.怎么在web页中嵌入html编辑器: 我们在需要嵌入得位置加入以下html代码: <object id

制作WEB在线编辑器-插入HTML标签

web|插入|在线 以前认为WEB的在线编辑器无非就是对输入内容的替换以及快捷的插入HTML代码,但是做的时候却发现虽然原理是那样,但是实现方法并非我想的那么死板.由于很少做UI上的东西所以到现在才知道在document中有execCommand方法可以解决插入HTML标签的问题,这个方法可以在光标所在位置插入需要的HTML标签,并且要注意的是,如果在一个限制的范围内插入标签需要先让该范围获得焦点,例如: a.focus(); a.document.execCommand('insertButt

html编辑器如何设置上传图片的宽度

问题描述 html编辑器如何设置上传图片的宽度 在html编辑器源码中如何设置上传图片的宽度,具体的js在哪,为什么我改的没用. insertimage : function(url, title, width, height, border, align) { title = _undef(title, ''); border = _undef(border, 0); var html = '<img width="320px" src="' + _escape(ur

求一款简单的在线编辑器,关键是免费能用到产品中哈~!

问题描述 不想自己去实现一个哈.有字体和字号,颜色等常用的基本功能就差不多了.最好是基于原生js,不要带框架的. 解决方案 百度的UEditor http://ueditor.baidu.com/解决方案二:我们公司的eform 自定义web表单系统中,也用到这种在线编辑器,有关键字颜色的变化,能查找等.解决方案三:xheditor解决方案四:ueditor,比较强大,可以去官网定制功能.解决方案五:这个有很多呢,你百度一下"富文本编辑器",有很多,对比一下看那个功能,界面比较适合.以

eWebSoft在线编辑器漏洞利用技巧_漏洞研究

现在eWebSoft在线编辑器用户越来越多,  危害就越来越大~  转载标明:  作者:badwolf  出处:坏狼安全网  http://www.winshell.cn/  首先介绍编辑器的一些默认特征:  默认登陆admin_login.asp  默认数据库db/ewebeditor.mdb   默认帐号admin 密码admin或admin888  搜索关键字:"inurl:ewebeditor" 关键字十分重要  有人搜索"eWebEditor - eWebSoft在