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里了。