- 浏览: 548311 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (618)
- java (109)
- Java web (43)
- javascript (52)
- js (15)
- 闭包 (2)
- maven (8)
- 杂 (28)
- python (47)
- linux (51)
- git (18)
- (1)
- mysql (31)
- 管理 (1)
- redis (6)
- 操作系统 (12)
- 网络 (13)
- mongo (1)
- nginx (17)
- web (8)
- ffmpeg (1)
- python安装包 (0)
- php (49)
- imagemagic (1)
- eclipse (21)
- django (4)
- 学习 (1)
- 书籍 (1)
- uml (3)
- emacs (19)
- svn (2)
- netty (9)
- joomla (1)
- css (1)
- 推送 (2)
- android (6)
- memcached (2)
- docker、 (0)
- docker (7)
- go (1)
- resin (1)
- groovy (1)
- spring (1)
最新评论
-
chokee:
...
Spring3 MVC 深入研究 -
googleyufei:
很有用, 我现在打算学学Python. 这些资料的很及时.
python的几个实用网站(转的) -
hujingwei1001:
太好了找的就是它
easy explore -
xiangtui:
例子举得不错。。。学习了
java callback -
幻影桃花源:
太好了,謝謝
Spring3 MVC 深入研究
转载自 smallchicken
最终编辑 smallchicken
先简要介绍一下HTML富文本编辑器实现原理,如果是非所见即所得,那么用 textarea就可以搞定了,如果要实现所见即所得,尤其是你想插入图片之类的,那么就要考虑用其他方式来替换 textarea了,毕竟textarea不能实现“实时预览”。
目前发布的HTML富文本编辑器比如:FCKeditor, TinyMCE等,实现方法基本上都是基于iframe ,在IE浏览器下的标签有一个 contentEditable属性,设置其值为 true就可以实现对其内部元素编辑了,例如 <div contentEditable="true">123</div> 或者 <p contentEditable="true">dds</p> 按照网上的说法是不支持Firefox的,不过我测试了一下,很不幸,Firefox下也可以用的,而且不仅如此,我测试了一下,连 safari 4.0 , Opera9.6 , google chrome , Firefox 3.10 都可以用,有可能是这些高版本的浏览器才加入的吧?或许早期的Firefox不支持呢? 这个就不知道了,不过,建议那些写技术博客的同仁们,如果自己没有经过测试,最好写清楚了,不要总把别人的博客粘来粘去,即使粘过来,自己也要测试一下! 如果要自己实现一个简单的HTML富文本编辑器,用系统自带的 execCommand(); 来修改, 这是document的一个方法,最先由IE实现,Firefox以及后来的浏览器都支持这个方法了。 尽管如此,这个方法在IE和FF下调用的参数和产生的结果并不一样! 详情请参考execCommand();在IE和FF下的详细参数, 好,切入正题,我们最想做的是什么? 第一步把一个iframe变为可写模式 第二步,在当前光标处插入内容! 有了这两步,就可以实现一个功能不错的编辑器了,我们也无须去考虑复杂的execCommand(); 参数了, 比如你要想把字体加大:只要插入一段 <p style="font-size:24px;">sddsds</p>就可以了 如果要插入一张图片: <img src=""/>代码既规范又简洁! <iframe src="" frameborder="0" name="editor" id="editor" width="400" height="200" style="border:1px solid #ccc;"></iframe> 这是一个iframe , 现在我们用js来修改使得其 document.designMode 为 "On" ,默认为"Off",这样就打开了 iframe 的可写模式 下面借助JQuery来实现,如果您没有JQuery,可能要另做判断了,因为不同的浏览器 要获取 iframe的document并不相同! <script> _win=$('#editor')[0].contentWindow; // 我们用 _win 变量代替 iframe window _doc=_win.document; // 用 _doc 变量代替 iframe的document _doc.designMode = 'On'; </script> 测试一下吧!,看看是不是可写了呢? 以上的代码并没有判断不同的浏览器,按照网上流传的说法:对于IE要用 : _doc.contentEditable='true'; 来设置。而我测试了,并不需要,只要上面的代码就可以运行了! 测试浏览器: IE6,7,8 Firefox3.10,Opera9.6, Safari 4.0 , google chrome 好,一般我们在打开可写模式后通常要写点东西进去比如 _doc.write('<html><body></body></html>'); 下面的代码在IE6下报告没有权限,不知道是不是我哪里设置的不对,open()和close()函数报告没有权限,其他浏览器都正常,如果FF下没有这两个函数,会显示浏览器一直处于刷新状态而IE不会,所以如果没有办法的话可以试着用代码判断一下: if( $.browser.msie ){ _doc.write('<img src="ui/images/info.gif"/> <h1>haha</h1>'); }else{ _doc.open(); _doc.write('<img src="ui/images/info.gif"/> <h1>haha</h1>'); _doc.close(); } 不知道有没有可能是我的浏览器问题! $.browser.msie这是Jquery用来检测浏览器是否为IE! 好,下面来实现最最关键的技术: 在当前的光标处插入HTML代码: 非IE等浏览器支持 _doc.execCommand('InsertHtml','',html); 第一个参数为:'InsertHtml' 第二个参数留空,第三个参数为插入的值 而IE不支持这个方法,但是IE支持 _doc.selection.createRange().pasteHTML(html); 方法 所以下面来实现: function insertHTML( sHtml ) { _win.focus(); if( $.browser.msie ){ _doc.selection.createRange().pasteHTML( sHtml ) ; }else{ _doc.execCommand( 'InsertHtml' , '' , sHtml ); } } _win.focus(); // 这一句很关键,如果当前的焦点不在 iframe上面,插入的时候就会插到页面里!而不是iframe里面,至于为什么,还没研究明白!因为_doc明明是iframe的!实在想不通! 好,有了这个方法,下面要实现什么就畅通无阻了! 比如插入一个图片: insertHTML( '<img src="example.png" />' ); 试试吧! 其他详细问题在进一步仔细研究!今晚就写到这里,睡觉! |
发表评论
-
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2014-12-09 10:33 759原文地址:http://www.techo ... -
241个jquery插件—jquery插件大全
2014-12-09 10:26 775原文地址:http://blog.csdn.net/adsda ... -
前端ui的js框架
2014-09-04 16:45 565原文地址:http://www.quickui.net/v3/ ... -
2014 年最火的21个JavaScript框架
2014-09-03 17:25 456原文地址:http://www.iteye.com/news/ ... -
Bootstrap 栅格系统
2014-08-08 15:53 496原文地址:http://www.cnblogs.com/lin ... -
自定义Bootstrap
2014-08-08 10:14 665原文地址:http://www.w3cplus.com/css ... -
使用python/casperjs编写终极爬虫-客户端App的抓取
2014-08-06 18:09 9331.缘起 随着移动互 ... -
使用Selenium和PhantomJS解析带JS的网页
2014-08-06 17:57 1023有的网页,不能直接通过wget/curl等命令、或者直接使用P ... -
数据抓取的艺术(一):Selenium+Phantomjs数据抓取环境配置
2014-08-06 17:56 604原文地址:http://blog.chin ... -
ubuntu12.04 下安装nodejs【整理】
2014-06-12 14:38 692ubuntu12.04 下安装nodejs【整理】 作者:杭州 ... -
Ubuntu安装nodeJS
2014-06-12 14:38 483Ubuntu安装nodeJS 安装环境 ubuntu12. ... -
纯js页面跳转整理
2014-05-20 18:06 499纯js页面跳转整理 js页面跳转 js方式的页面跳转 1. ... -
细说Cookie
2013-09-29 15:14 627细说Cookie 阅读目录 开始 ... -
JavaScript Source Map 详解
2013-08-30 09:49 777JavaScript Source Map 详解 ... -
主题:50个令人惊奇的jQuery插件
2013-05-29 18:17 965jQuery拥有强大的有创造性的程序员群体。 然而,它很难通 ... -
jquery触发事件
2013-05-23 17:25 584Snandy Stop, thinking is th ... -
jquery事件命名空间
2013-05-23 17:13 484JQUERY事件命名空间 2012 ... -
jQuery的事件命名空间-Namespaced Events
2013-05-23 17:12 609jQuery的事件命名空间-Namespaced Event ... -
JQuery自定义事件的应用 JQuery最佳实践
2013-05-23 16:54 763本文主要介绍JQuery框架里面支持的自定义事件模型,通过实 ... -
jquery插件开发
2013-05-13 15:01 683此文引自:http://www.cnblogs.com/to ...
相关推荐
quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor 基于html 可以将文本框内图片优先上传后服务器 因为编辑器默认是将图片转成base64存储的,而我们实际开发需要将图片存在自己的服务器中...
主要介绍了JS实现pasteHTML兼容ie,firefox,chrome的方法,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
如果想实现更加复杂的交互应用,或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问,那么你可以选择使用方法2,相对具有更大的自由空间。 xhEditor也提供了即时的卸载编辑器方法: $('#elm1')....
主要介绍了JS中innerHTML和pasteHTML的区别,结合实例形式较为详细的分析了innerHTML和pasteHTML的具体功能与使用区别,需要的朋友可以参考下
类似QQ空间里的留言编辑器. case 1: E.document.execCommand("Bold");break; case 2: E.document.execCommand("Italic");break; case 3: E.document.execCommand("Underline");break; case 6: var _Text=Remove...
软件介绍xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。Features(特点): Small:初始加载5个文件,包括:...
ckeditor_notion_pastehtml
xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。 xhEditor is a simple,small,fast WYSWYG(What You See ...
代码如下://高亮显示搜索到的关键字function HeightLight(Keyword){ //文本选择器 var TextRange; //是否找到 var Found=false; //找到的次数 var Count = 0; TextRange = document.body.createTextRange();...
“点睛”的广告代码,很牛B,本想从中找出在FireFox下如何实现findText及pasteHTML类似效果的,我看了大半天,楞是没有看出个所以然来!还是自己慢慢研究吧。
可编辑 obj.contenteditable=true 执行菜单命令 obj.execCommand 双字节字符 /[^x00-xff]/ 汉字 /[u4e00-u9fa5]/ 让英文字符串超出表格宽度自动换行 word-wrap: break-word; word-break: break-all; ...
js高亮方法一: 代码如下:[removed] ... while(keyword.findText(nWord)){ keyword.pasteHTML(“” + keyword.text + “”); keyword.moveStart(‘character’,1); } } } function highword(nWord){ var array = nWo