FCK使用手记1（源代码如何显示FCK编辑器面板的）

最新推荐文章于 2021-07-03 11:36:57 发布

最新推荐文章于 2021-07-03 11:36:57 发布 · 83 阅读

文章标签：

#fckeditor #JavaScript #Firebug #HTML #ViewUI

本文详细解析了FCK在线编辑器的工作原理，包括版本介绍、实例创建过程及面板显示机制，揭示了FCK如何通过动态创建iframe实现编辑器功能。

由于业务需求，公司在前一段时间在工程项目中引入了FCK在线编辑器，使用了一段时间后，发现难以满足目前的要求，于是需要对一些源代码进行修改，今天使用fireBug进行了一下跟踪，觉得FCK的面板创建原来是这样的，挺有趣，分享下：

1、首先说明下版本，我觉得这个很重要，现在网上很多教程都不说明版本，所以有时候照着做了半天，才发现版本不对，纯属白忙活。当然我现在说的和版本应该关系不大，因为这里不涉及到如何进行配置。公司使用的版本是FCKeditor_2.6.3和配套的java_core_2.4。

2、FCK实例的创建，我使用的是JAVAScript来创建的FCK实例，在使用var oFckeditor = new FCKeditor('content');时，在fckeditor/fckeditor.js中你将创建一个FCK的实例，进行一些基本设置后，我采用了oFckeditor.CreatHtml()方法创建FCK编辑器。

3、在oFckeditor.CreatHtml()这个方法中，调用了两个方法，我们说第2个方法——_GetIframeHtml(),这个方法创建了一个IFrame元素，iframe元素的src属性指向了editor/fckeditor.html这个页面，也就是说FCK编辑器真正的面目就在这个页面上。

4、到这里我们就明白了，FCK面板的显示是在你的页面中用javascript动态创建了一个iframe,iframe装载了fckeditor.html这个页面，然后通过你的DIV对像加入这个iframe就可以了。

呵呵，如有不正确的地方，大家多多指正，其实追踪源代码真的很有意思。由于需要比较多的修改FCK，如果大家有什么好的资料，请传阅于我，谢谢。