TQEditor详解-优快云博客

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

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

使用方式：

以下是文件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里了。