微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

在线编辑器的实现原理(兼容IE和FireFox)_javascript技巧

php中文网
发布： 2016-05-16 19:17:21
原创
1535人浏览过

在线编辑器在我们日常的项目开发中非常有用（如新闻系统），它可以方便地实现文章的在线编辑，省掉了FrontPage等工具。那么是怎样实现浏览器在线编辑功能的呢?  首先需要IE的支持,在IE5.5以后就有一个编辑状态. 就是利用这个编辑状态,然后用javascript来控制在线编辑的。 
     首先要有一个编辑框，这个编辑框其实就是一个可编辑状态的网页， 我们用iframe来建立编辑框。
      
     并且在加上javascript代码来指定HtmlEdit有编辑功能(下面提供完整的原代码)：

讯飞智作-讯飞配音
讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

讯飞智作-讯飞配音 67
查看详情 讯飞智作-讯飞配音
复制代码 代码如下:

<script> <BR> var editor; <BR> editor = document.getElementById("HtmlEdit").contentWindow; <br><br> //只需键入以下设定，iframe立刻变成编辑器。 <BR> editor.document.designMode = 'On'; <BR> editor.document.contentEditable = true; <br><br> //但是IE与FireFox有点不同，为了兼容FireFox，所以必须创建一个新的document。 <BR> editor.document.open(); <BR> editor.document.writeln('<html><body></script>

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：B/S开发中常用javaScript技术与代码_javascript技巧 下一篇：鼠标经过时链接文字的特别震撼的显示效果_链接特效
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript_跨平台开发与Electron实战 Electron是基于Chromium和Node.js的桌面应用开发框架，支持HTML、CSS、JavaScript技术栈，广泛用于VSCode、Slack等跨平台应用。
2025-11-21 20:35:02
322
JavaScript算法优化_时间复杂度与空间复杂度分析 斐波那契数列计算中，原始递归法时间复杂度为O(2ⁿ)，因重复计算导致效率低下；通过记忆化优化可降至O(n)，显著提升性能。
2025-11-21 20:34:02
544
JavaScript物联网_设备连接与数据处理 JavaScript通过MQTT协议实现物联网设备连接，利用Node.js解析传感器数据并格式化为标准结构，结合InfluxDB存储时序数据，支持前端可视化与云端转发，构建完整IoT数据链路。
2025-11-21 20:33:35
717
ES6新特性_箭头函数应用 箭头函数是ES6引入的简洁函数语法，使用=>定义，省略function关键字和return语句，单参数可省括号，如n=>n*2；它不绑定this，继承外层作用域的this值，解决回调中this指向问题，如在setTimeout或对象方法中正确访问属性；广泛用于map、filter、reduce等数组方法，提升可读性，但不能用作构造函数，也没有arguments对象，合理使用可使代码更简洁且this更可控。
2025-11-21 20:32:02
276
JavaScript装饰器_类与方法修饰实践 装饰器通过修改类或方法行为提升代码可维护性，如用LogCreation记录类创建时间，AddTimestamp添加实例属性，MeasureTime统计方法耗时，PreventConcurrent防止异步重复执行。
2025-11-21 20:31:02
254
JavaScript生物识别_WebAuthn认证流程 WebAuthn通过公钥加密和生物识别实现无密码认证，提升安全性和用户体验。1.注册时调用navigator.credentials.create()生成密钥对，公钥由服务器存储，私钥安全保存在设备中；2.登录时通过navigator.credentials.get()获取凭证，使用私钥对挑战进行签名完成身份验证；3.服务器负责生成挑战、验证签名结构、校验源和rpId一致性，并维护用户与凭证映射；4.生物识别仅用于本地验证用户存在，解锁私钥时不暴露生物数据，保障隐私。该方案依赖前后端协同，实现抗
2025-11-21 20:28:02
912
JavaScript原型防御：保护内置对象行为及预防策略 本文探讨了JavaScript中第三方脚本可能恶意修改原始类型原型的问题，导致内置方法行为异常。文章核心内容是介绍如何利用Object.freeze()方法来冻结内置对象的原型，从而有效预防原型被篡改，确保代码运行的稳定性和预期行为。同时，也指出了这种防御策略的局限性，如执行顺序要求和无法恢复已被修改的原型等。
2025-11-21 20:27:01
107
JavaScript元编程_Proxy与Reflect高级应用 Proxy和Reflect提供JavaScript元编程能力，Proxy可拦截对象操作如get、set、apply，结合Reflect能实现响应式系统、只读代理、自动嵌套对象等高级功能，提升灵活性但需注意性能与调试复杂度。
2025-11-21 20:24:02
574
Vue应用中SimpleMDE Markdown编辑器初始化失效问题的解决方案 在使用Vue应用中集成SimpleMDEMarkdown编辑器时，常见的初始化失败问题源于Vue在挂载时替换DOM节点。本文将详细阐述此问题的原因，并提供一种利用Vue生命周期钩子mounted和ref属性来正确初始化SimpleMDE编辑器的方法，确保其在Vue环境中正常运行并保持响应性。
2025-11-21 20:22:02
464
JavaScript构建工具_Gulp任务流与插件开发 Gulp是基于Node.js的流式前端构建工具，通过src()、dest()、pipe()和watch()四大核心方法实现高效的任务自动化处理。它利用内存中的文件流减少磁盘读写，提升性能，支持SASS编译、CSS压缩、JS合并等任务，并可通过自定义插件扩展功能，适用于轻量级或定制化项目构建场景。
2025-11-21 20:22:02
483
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部