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

 更新时间:2016年9月20日 19:05  点击:1235

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来实现的。所以字号的自由设定才始终没能实现。

一切关于“问题的解决之道”的方法论都不外乎是“变通”二字的某种讲法。  为了联系方便,用mailto标签把自己的电子邮件贴在网站上,结果直接造成该邮箱成为垃圾邮件桶,到现在为止该邮箱邮件收到各种垃圾邮件上千封,这个邮箱就算是这样被废掉了。

  究其原因,还是使用了mailto标签,一些诸如“mail-robot”的自动搜索程序把自己的电子邮件地址搜索到,然后添加到他们的数据库中了,以后自己的邮箱就成为众的之矢,当然是被炸的对象了.

  暂时还没有找到解决的办法,只是不使用mailto标签,改为其它方式.

  附:“mailto”的六则应用技巧

    大家知道,mailto是网页设计制作中的一个非常实用的html标签,许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址,这样网页浏览者一旦用鼠标单击一下由mailto组成的超级连接后,就能自动打开当前计算机系统中默认的电子邮件客户端软件,例如OutLook Express以及Foxmail等。当然有关mailto标签的使用,并不仅仅就象上面所说的那样简单,它还有其他方面的应用。为了能帮助各位用户对mailto标签有一个全面的认识,笔者在此就对mailto标签的使用做一个详细的总结,希望能与大家共享交流!

    1、如果我们在网页中创建一个形如“mailto: webmaster@eway51.com”这样的超级连接时,用鼠标单击一下该超级连接的话,浏览器会自动调用系统默认的邮件客户端程序,同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址,而其他的内容都是空白,留给访问者自行填写;

    2、要是大家在单击电子邮件超级连接时,希望系统自动打开的电子邮件编辑窗口中,除了在收件人地址栏中自动填写上内容外,在抄送地址栏中也能自动填写上自己需要的电子邮件地址的话,就可以直接在网页的html源代码中插入形如“mailto: webmaster@eway51.com?eway51@hotmail.com”这样的语句,其中webmaster@eway51.com将会自动出现在收件人地址栏中,eway51@hotmail.com则会自动出现在抄送地址栏中;

    3、如果大家希望在弹出的邮件编辑窗口中能自动将邮件的主题内容填上的话,可以使用形如“mailto: webmaster@eway51.com?subject=给网的意见”这样的html语句,当浏览者用鼠标单击由该语句组成的电子邮件超级连接时,在随后打开的邮件编辑窗口的收件人地址栏中自动出现webmaster@eway51.com,主题设置栏中将自动出现“给网的意见”这样的内容;

    4、如果想在收件人地址栏中同时输入多个电子邮件地址时,那么就可以使用形如“mailto: webmaster@eway51.com;eway51@hotmail.com”这样的语句,记住每个电子邮件之间用“;”隔开,这样当浏览者单击由该语句创建的电子邮件超级连接时,在弹出的邮件编辑窗口的收件人地址栏中同时会出现webmaster@eway51.com、eway51@hotmail.com这样的收件人地址,浏览者就能同时向这些人发送电子邮件;

    5、在网页中出现的邮件地址经常会被一些诸如“mail-robot”的自动搜索程序搜索到,这样其他人很容易利用搜索到的邮件地址来向你发送各种各样的垃圾邮件,为了能将这些垃圾邮件拒之于千里之外,我们可以将在网页上公开的邮件地址写成ASCII码形式,同时要记住每一个ASCII码前面都必须添加“&#”,例如我们在网页中使用“mailto: webmaster@eway51.com”这样的语句来创建电子邮件超级连接的话,单击该超级连接后,我们发现在随后打开的邮件收发窗口中,收件人地址栏中仍然会显示webmaster@eway51.com这样的内容,而其他的各种邮件自动搜索工具都不能正确识别这样的ASCII代码,因此用户收到的各种来历不明的垃圾邮件就会大大减少;

    6、一般情况下,浏览者单击电子邮件超级连接时,系统在默认打开的邮件客户端软件中,只是自动在收件人地址栏处填上内容,而其他设置栏处仍然显示为空白,如果大家还希望自动把主题、抄送、暗送甚至内容都填写上的话,就可以使用形如“mailto: webmaster@eway51.com?cc=eway51@hotmail.com&bcc=web@eway51.com&subject=给网的建议&body=希望贵站越办越好!”这样的语句,在这个语句中第一个功能以“?”开头,后面的每一个功能以“&”开头;当用鼠标单击这个邮件地址时,在随后打开的邮件编辑窗口中,我们将看到在收件人地址栏中自动填写上了webmaster@eway51.com,在抄送地址栏中自动填写上了eway51@hotmail.com,在暗送地址栏中自动填写上了web@eway51.com,在主题栏中自动填写上了“给网的建议”,

<

  提示:请把全角状态下的<>改成半角状态下的<>使用

  很多个人网站的站长都希望为自己的网站建立一个站内搜索引擎,但一不熟悉ASP、PHP、JSP等动态开发技术,另外自己建立站内搜索也需要空间支持相应的动态技术,所以常不得已放弃。其实,何不借用Google打造站内搜索引擎,来方便网友对自己网站的内容进行查找。

  若想在某特定网站内搜索特定的内容(如搜索www.cfan.com.cn中包含关键字“网络”的内容),只需要在Google的搜索栏里输入:“网络 site:cfan.com.cn”即可(不含引号)。如果直接在自己站点的网页上建立一个Google的搜索栏,然后让访问者按Google规定的格式进行查询,那不就能实现Google作为自己站内搜索引擎的功能了吗?但是我们当然不能要求使用者还要特地学习Google对特定网站搜索的格式规范。于是笔者立刻联想到是否可以使用JavaScript脚本使得Google接收的查询关键字后自动加上类似“site:cfan.com.cn”的字符串呢?答案当然是肯定的。在你的网站首页需要放置站内搜索引擎页面的<body>标签的范围内放置如下代码:

<script type="text/javascript">
var domainroot="mysite.com"//个人站点域名,替换成你的网站的网址即可
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form action="http://www.Google.com/search" method="get" onSubmit="Gsitesearch(this)">
<p>站内搜索:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="开始搜索">
</p>
</form>

  脚本的关键部分在于Gsitesearch函数。语句:“curobj.q.value="site:"+domainroot+" "+curobj.qfront.value”的含义为:将“site:”字符串+变  量domainroot、空格、访客填写的关键字依此合并。既使得搜索格式符合Google的语言规范,又使增加了搜索功能的友好性,不需要用户来遵循Google的搜索规则。

  至此,您的专业站内搜索引擎就完成了(见图1 完成的站内引擎)。

  如果我们不但要搜索本站的内容,还要让访客同时能搜索兄弟站点或本类网站的内容,该如何修改呢?接下来我们就对我们刚才的代码做一些推广。

<script type="text/javascript">
function Gsitesearch(curobj){
var domainroot=curobj.domainroot[curobj.domainroot.selectedIndex].value
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}很多朋友对我说,她/他有代码洁癖,即,让她/他写XHTML的话,从来不愿意加上额外的标签(tag)。举个简单的例子,相信很多人从很多地方都看到过的:

<div id="nav">
    <ul>
        <li></li>
        <li></li>
        ......
    </ul>
</div>


<

  Micrsoft推出IE7已有一段时间了,相信大家已领略到IE7带来的从视觉和功能上的改进了,不过作为Web设计人员可要注意了:在CSS文件中,如:

.text{
color: #ff0000 !important;
color: #000000;
}

    以上代码在IE7中显示的文字颜色是红的。这一意味着新版的IE7认识!important了。大多数WebStandard设计者都用!important解决IE和Firefox对margin的理解问题,如果不用!important分别设margin值,稍微有点布局的符合WebStandard的网页必然在IE或Firefox下有一个是面目全非的。不要认为微软这个激进的做法不会对现有代码造成影响。

    在IE6、IE7过度阶段,使用IE6的用户依然会不理解带!important的CSS,而使用IE7的用户会和使用Firefox的用户一样理解!important,问题是IE7和Firefox对margin和padding的处理还是不同,换句话说现在开始要找别的方法给微软擦屁股了。




[!--infotagslink--]

相关文章

  • c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)

    这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03
  • Android设置TextView竖着显示实例

    TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
  • BootStrap和jQuery相结合实现可编辑表格

    这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
  • vivo x9怎么设置默认输入法?vivo x9设置默认输入法教程

    本篇文章介绍了vivo x9如何设置默认输入法的方法,手机小白们快来了解一下吧。 问:vivo x9怎么设置默认输入法?答:其实设置默认输入法很容易,首先点击应用程序,然后点设...2017-01-22
  • Windows Server 2008 R2远程设置选项灰色解决方法

    最近公司环境有几天Windows Server 2008R2的服务器因为没有激活导致过期后都不能远程,连接显示器后发现远程设置的地方为灰色了...2016-01-27
  • jQuery实现可以编辑的表格实例详解【附demo源码下载】

    这篇文章主要介绍了jQuery实现可以编辑的表格,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下...2016-07-25
  • PHP脚本实现Magento权限设置与缓存清理

    PHP脚本实现Magento权限设置与缓存清理的实例代码有需要的朋友可参考一下。 代码如下 复制代码 <?php ## 设置文件644,目录755 function Al...2016-11-25
  • Eclipse编辑jsp、js文件时卡死现象的解决办法汇总

    使用Eclipse编辑jsp、js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,下面通过脚本之家平台给大家分享几种解决办法,需要的朋友参考下...2016-02-05
  • Windows 2016 服务器安全设置

    最近公司的网站升级Windows 2016服务器,选择安装了最新版的Windows 2016,以前使用Windows服务器还是Windows 2003系统,发现变化还是挺多的,依次记录下来以备后面查阅...2020-10-05
  • 深入分析为Visual Assist设置快捷键的方法

    本篇文章是对为Visual Assist设置快捷键的方法进行了详细的分析介绍,需要的朋友参考下...2020-04-25
  • win2008之IIS7中FTP设置技巧

    如果要允许用户在站点中上载或下载文件,就需要在 Web 服务器上设置 FTP。无论站点是位于 Intranet 还是位于 Internet 上,使用 FTP 在所提供的位置中上载和下载文件的原理是相同的。...2016-01-27
  • 超漂亮的Bootstrap 富文本编辑器summernote

    Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建。对bootstrap 文本编辑器相关知识感兴趣的朋友一起学习吧...2016-04-06
  • goland设置颜色和字体的操作

    这篇文章主要介绍了goland设置颜色和字体的操作方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-04
  • 帝国CMS会员注册字段增加编辑器、发送短消息改为编辑框

    通过本教程可以实现帝国CMS后台给前台注册用户发消息,把内容输入框改为编辑器,可上传图片,等打开文件\e\admin\member\SendMsg.php 大约84行<textarea name="msgtext" cols="6...2016-01-27
  • C#如何更改Word的语言设置

    这篇文章主要为大家详细介绍了C#如何更改Word的语言设置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • ASP.NET百度Ueditor编辑器实现上传图片添加水印效果

    这篇文章主要给大家介绍了ASP.NET百度Ueditor编辑器1.4.3这个版本实现上传图片添加水印效果的相关资料,文中通过图文及示例代码介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。...2021-09-22
  • Go 自定义package包设置与导入操作

    这篇文章主要介绍了Go 自定义package包设置与导入操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
  • 三星s5820如何恢复出厂设置

    提示,恢复出厂前我们最好对数据进行一些备份哦,包括:联系人,短信,电话,视频,照片哦,恢复之后手机中的数据就丢失了。 具体方法 1.在待机模式下,点击【应用程序】。 2.点击...2016-09-20
  • C# RichTextBox制作文本编辑器

    这篇文章主要为大家详细介绍了C# RichTextBox制作文本编辑器的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • KindEditor编辑器调用方法

    KindEditor编辑器调用方法,这个编辑器可使用到任何语言中,他是一个纯js的编辑器,但它默认的编辑是utf-8如果是gb2312编辑的朋友就是KindEditor.js打开,重保存为gb2312...2016-11-25