TQEditor研究

TQEditor是个强大的在线编辑器。（参http://www.e512.net/tqeditor/index.htm）

一直以来都没看懂，自己的JavaScript水平也一般，今天静下心来分析其结构。

使用方式：

<script src="" type="text/javascript"></script>

    <textarea id="e1" rows="30" cols="100" name="e1" ><%=fg_Content%></textarea>

    <script type="text/javascript" defer="true">
        var eq = new tqEditor('e1', { toolbar: 'full' });
    </script>
简述：定义了id=e1的一个textarea，然后 创建对象tqEditor，使用e1作为参数。

以下是文件TQEditor/TQEditor.js的分析：

最外层声明：

(function(window,undefined){
//....
})(window);

这个看起来是用来定义类的。

类的定义：

TQE=function(objId,userConfig)
{

       //...
       $._getDoc=function(){
var iframe =$._editorObj();
return iframe.contentDocument || iframe.contentWindow.document;
};
       $.init();
}

TQE._hideContext=function(){
if(TQE.activeContext){
TQE.activeContext.style.display="none";
TQE.activeContext=null;
}
};

//...

分析：用类内部"$."的方式定义了一些函数，用外部"TQE."的方式定义了一些函数。

在构造时调用了$.init作为初始化。

类的初始化：

$.init=function(){
  //...设定宽，高。
  code ='<div class="" id="'+$.objId+'_EditorToolBar">';
  code += '</div>'+
  //编辑区
  '<div id="'+$.objId+'_EditorClient" class="eEditorClient">'+
  ' style="height:'+$.config.height+'px;" frameborder=0 ></iframe>'+
  '</div>'+ 
  //'</div>'+
  '<div class="eStatusBar"><div class="eResizeWH" ></div><div class="eResizeH" ></div></div>';
  var e =TQE.CE('DIV','TQEditorContainer_'+$.objId, code );
  $.obj.parentNode.insertBefore(e, $.obj);
}

分析：上面的 <iframe id="'+$.objId+'_Editor".. 指定了编辑区。

再看内容的取出：

$.content=function(){
        code= $._editorObj().value;
return code;
};
$._editorObj= function(){
return  TQE.find($.objId+'_Editor');
};

       由此可见内容就是iFrame里的内容。

结论：

    TEQ在初始化时构造了iFrame，在本例中，其id=e1_Editor

    通过对这个iFrame的取设，完成了编辑内容的处理。

    因为iFrame相对独立，所以外面的样式表对其不起作用。如果想对其设定默认的样式，只能直接加在iFrame里了。