繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 在线编辑器的实现原理(兼容IE和FireFox)
- Javascript
- js 创建一个浮动div的代码
- javascript下利用数组缓存正则表达式的实现方法
- javascript 最常用的10个自定义函数[推荐]
- jQuery 常见开发使用技巧总结
- 十分钟打造AutoComplete自动完成效果代码
- JavaScript 入门基础知识 想学习js的朋友可以参考下
- javascript 清空form表单中某种元素的值
- javascript 格式化时间日期函数代码脚本之家修正版
- javascript dom操作之cloneNode文本节点克隆使用技巧
- jQuery 动态酷效果实现总结
- jQuery中的常用事件总结
- 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
- javascript+css 网页每次加载不同样式的实现方法
- 向大师们学习Javascript（视频与PPT）
- js 实现无干扰阴影效果 简单好用（附文件下载）
- JavaScript 拾漏补遗
- IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
- jQuery的强大选择器小结
- jquery $(document).ready() 与window.onload的区别
- javascript 动态调整图片尺寸实现代码
Javascript 中的 在线编辑器的实现原理(兼容IE和FireFox)
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 178 ::
收藏到网摘: n/a
在线编辑器在我们日常的项目开发中非常有用（如新闻系统），它可以方便地实现文章的在线编辑，省掉了FrontPage等工具。那么是怎样实现浏览器在线编辑功能的呢? 首先需要IE的支持,在IE5.5以后就有一个编辑状态. 就是利用这个编辑状态,然后用javascript来控制在线编辑的。
首先要有一个编辑框，这个编辑框其实就是一个可编辑状态的网页， 我们用iframe来建立编辑框。
<IFRAME id=“HtmlEdit” style="WIDTH: 100%; HEIGHT: 296px" marginWidth=“0” marginHeight=“0”></IFRAME>
并且在加上javascript代码来指定HtmlEdit有编辑功能(下面提供完整的原代码)：
复制代码 代码如下:
<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>
评论 (0) All
