自己打造HTML在线编辑器的实现难点分析 程序员文章站 2022-06-23 21:59:43 html在线编辑器实际上是什么 其实有好几种实现方式，目前用得最多、兼容性最好的还是iframe方式。 <div class="content"> <h3>html在线编辑器实际上是什么</h3> <p>其实有好几种实现方式，目前用得最多、兼容性最好的还是iframe方式。</p> <code><iframe src="" frameborder="0"></iframe></code> <p>只有这个空iframe是不行的，还要用javascript把它设成可编辑：</p> <code>iframe.contentwindow.document.designmode = "on";<br>iframe.contentwindow.document.contenteditable = true;</code> <p>换而言之，<strong>html在线编辑器就是一个可编辑的iframe</strong>。</p> <h3>加粗、斜体、下划线、加链接等功能如何实现</h3> <p>浏览器已经提供了实现这些功能的接口<strong>execcommand</strong>：</p> <code>iframe.contentwindow.document.execcommand(<em>cmd, isdefaultshowui, value</em>);</code> <p>这三个参数的意思分别是：</p> <ul> <li>cmd：命令文本，有好多，ie的可以看<a href="http://msdn.microsoft.com/zh-cn/library/ms533049%28v=vs.85%29.aspx" target="_blank" rel="nofollow">这里</a>，firefox的可以看<a href="https://developer.mozilla.org/en/rich-text_editing_in_mozilla#" target="_blank" rel="nofollow">这里</a>。</li> <li>isdefaultshowui：是否默认显示交互界面，比如加链接的时候，可以通过界面填入链接。不过这个参数存在兼容性问题，一般设为false将其禁用，并另外制作交互界面。</li> <li>value：传入的值，某些命令可以省略。</li> </ul> <p>execcommand的问题是，生成的代码可能不标准，比如在ie下，文字加粗用的是b标签而不是strong标签。</p> <h3>交互问题</h3> <p>用户不可能总是在编辑器中输入，比如加粗、插入图片等功能是通过按钮操作的。假设用户要加粗一段选中的文字，当他按了加粗按钮后，选区以及焦点也会跟着跑到那去，因此选区（选中的文字）丢失，操作也就无法完成；同理，插入图片时插入位置也会丢失。</p> <p>也就是说，要保存最后出现在编辑器中的选区。我采取的方案是，当焦点在编辑器内的时候，用一个定时器（setinterval）<strong>定时获取当前选区</strong>。选区编程平时很少用，做起来也有很多兼容性问题，主要是参考微软的<em>msdn</em>（<a href="http://msdn.microsoft.com/zh-cn/library/ms535872%28en-us,vs.85%29.aspx" target="_blank" rel="nofollow">textrange</a> <a href="http://msdn.microsoft.com/en-us/library/ms537447%28vs.85%29.aspx" target="_blank" rel="nofollow">controlrange</a>）和mozilla的<em>mdc</em>（<a href="https://developer.mozilla.org/en/dom:range" target="_blank" rel="nofollow">range</a> <a href="https://developer.mozilla.org/en/dom:selection" target="_blank" rel="nofollow">selection</a>）了。</p> <h3>回车问题</h3> <p>在ie下，按回车是换段落，生成<p>，但在firefox下是换行，生成的是<br>。要解决这个问题，就要监听keydown事件，如果检测到按键是回车，就插入“<p></p>”。</p> <h3>获取标准的代码</h3> <p>如何获取编辑的内容呢？这个问题很简单，只要获取iframe页面body中的innerhtml就可以了：</p> <code>var content = iframe.contentwindow.document.body.innerhtml;</code> <p>然而，ie下的innerhtml非常不标准：标签名是大写的，属性没有引号包起来，单标签也没有结束符……即便是firefox下获取的代码，也有少量瑕疵。这个时候就要用<strong>正则表达式</strong>对代码进行标准化处理。</p> <h3>总结</h3> <p>不多说了，做一遍html编辑器，你就会知道<a href="http://ckeditor.com/" target="_blank" rel="nofollow">ckeditor</a>是多么强大。</p> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/1509662.html"> FCKeditor 2.6.6在ASP中的安装及配置方法分享 </a> </p> <p> 下一篇： <a href="/article/1509664.html"> .net中自定义错误页面的实现方法 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2021625.html" target="_blank" title="打造属于自己的 HTML/CSS/JavaScript 实时编辑器"> <h2> 打造属于自己的 HTML/CSS/JavaScript 实时编辑器 </h2> </a> </li> <li> <a href="/article/1642826.html" target="_blank" title="PHP从零开始打造自己的MVC框架之路由类实现方法分析"> <h2> PHP从零开始打造自己的MVC框架之路由类实现方法分析 </h2> </a> </li> <li> <a href="/article/1509663.html" target="_blank" title="自己打造HTML在线编辑器的实现难点分析"> <h2> 自己打造HTML在线编辑器的实现难点分析 </h2> </a> </li> <li> <a href="/article/1332266.html" target="_blank" title="使用 CodeMirror 打造属于自己的带高亮显示的在线代码编辑器"> <h2> 使用 CodeMirror 打造属于自己的带高亮显示的在线代码编辑器 </h2> </a> </li> <li> <a href="/article/884858.html" target="_blank" title="在线所见即所得HTML编辑器的实现原理浅析_javascript技巧"> <h2> 在线所见即所得HTML编辑器的实现原理浅析_javascript技巧 </h2> </a> </li> <li> <a href="/article/685749.html" target="_blank" title="打造属于自己的 HTML/CSS/JavaScript 实时编辑器"> <h2> 打造属于自己的 HTML/CSS/JavaScript 实时编辑器 </h2> </a> </li> <li> <a href="/article/648681.html" target="_blank" title="在线所见即所得HTML编辑器的实现原理浅析_javascript技巧"> <h2> 在线所见即所得HTML编辑器的实现原理浅析_javascript技巧 </h2> </a> </li> <li> <a href="/article/520936.html" target="_blank" title="PHP从零开始打造自己的MVC框架之路由类实现方法分析"> <h2> PHP从零开始打造自己的MVC框架之路由类实现方法分析 </h2> </a> </li> <li> <a href="/article/259970.html" target="_blank" title="自己打造HTML在线编辑器的实现难点分析"> <h2> 自己打造HTML在线编辑器的实现难点分析 </h2> </a> </li> <li> <a href="/article/20381.html" target="_blank" title="使用 CodeMirror 打造属于自己的带高亮显示的在线代码编辑器"> <h2> 使用 CodeMirror 打造属于自己的带高亮显示的在线代码编辑器 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>