Discuz编辑器简单分析

Discuz编辑器简单分析2009-09-27 23:26 Post.php 加载post.htm打开 http://127.0.0.1/bbs/post.php?action=newthread&fid=2 进入发贴页面，查看该页源代码。可以看到

…

这个div里面就是编辑器的内容了。继续在里面找到

….

这里面大概就是格式、工具栏了，通过这些按扭可以设置相关格式，及插入图片，代码等。在

…

里面可以看到如下代码：

这里就是那条工具栏了，可是 中间并没有文字和图片啊，为什么在页面上能显示出 这样的形式呢，那个代码文字就是 title="代码"起的作用，图片其实是通过css样式弄出来的。在html源代码里可以看到 @import url(forumdata/cache/style_5_common.css?RzZ);打开style_5_common.css，里面是压缩过的样式，可以用css压缩解压工具把代码整理一下，让其变成正常人能看懂的。 .editor a{float:left;text-align:left;text-decoration:none;display:block;height:21px;width:20px;background:url(../../images/common/editor.gif) no-repeat 0 30px;text-indent:-9999px;overflow:hidden;border:1px solid #F7F7F7;margin:1px 0;} 这是设置应用了.editor类里面的a标签的背景，就是那张editor.gif。 #e_cmd_insertimage{background-position:0 -161px;} /*插入图片背景*/ #e_cmd_code{background-position:0 -461px;} /*代码工具按扭的背景，这个按扭其实就是a 标签*/那为什么点击 这个标签会出现一个插入代码框呢？这其实是通过js来完成的。 Post.php 页面的html代码里有这样的几句 function openEditor(){……} //定义打开编辑器函数 Post.php 页面并没有直接调用openEditor()，而且在post.js里调用了openEditor(), function openEditor() { try { newEditor(wysiwyg); //新建一个编辑器,此函数定义在post.js里 if(editbox) { editbox.className = 'autosave max'; } …… }Post.js function newEditor(mode, initialtext) { …… setEditorEvents(); initEditor(); //初始化编辑器 } 看看 initEditor()函数的定义 function initEditor() { var buttons = $(editorid + '_controls').getElementsByTagName('a'); //得到e_controls里的a //遍历a,给它加上onclick事件 for(var i = 0; i < buttons.length; i++) { if(buttons[i].id.indexOf(editorid + '_cmd_') != -1) { buttons[i].href = 'javascript:;'; buttons[i].onclick = function(e) {discuzcode(this.id.substr(this.id.lastIndexOf('_cmd_') + 5))}; } else if(buttons[i].id == editorid + '_popup_media') { buttons[i].href = 'javascript:;'; buttons[i].onclick = function(e) {discuzcode('media')}; } else if(buttons[i].id.indexOf(editorid + '_popup_') != -1) { buttons[i].href = 'javascript:;'; buttons[i].onclick = function(e) {InFloat = InFloat_Editor;showMenu(this.id, true, 0, 2)}; } } setUnselectable($(editorid + '_controls')); textobj.onkeydown = function(e) {ctlent(e ? e : event)}; } //关键是在点击时调用的discuzcode()函数 function discuzcode(cmd, arg) { if(cmd != 'redo') { addSnapshot(getEditorContents()); } …… if(in_array(cmd, ['quote', 'code', 'free', 'hide','php'])) { …… lang['e_code'] = '请输入要插入的代码'; lang['e_free'] = '请输入要插入的免费信息'; lang['e_hide'] = '请输入要插入的隐藏内容'; if(cmd != 'hide' || !selection) { str += lang['e_' + cmd] + ':
'; } str += cmd == 'hide' ? '
只有当浏览者回复本帖时才显示
只有当浏览者积分高于 时才显示' : ''; var div = editorMenu(ctrlid, str); //此div就是代码输入显示框 $(ctrlid + '_param_' + (cmd == 'hide' && selection ? 2 : 1)).focus(); $(ctrlid + '_param_' + (cmd == 'hide' && selection ? 2 : 1)).onkeydown = editorMenuEvent_onkeydown; $(ctrlid + '_submit').onclick = function() { //处理提交按扭点击事件 checkFocus(); if(is_ie) { setCaret(pos); } if(cmd == 'hide' && $(ctrlid + '_radio_2').checked) { var mincredits = parseInt($(ctrlid + '_param_2').value); opentag = mincredits > 0 ? '[hide=' + mincredits + ']' : '[hide]'; } var text = selection ? selection : $(ctrlid + '_param_1').value; if(wysiwyg) { if(cmd == 'code') { text = preg_replace(['<', '>'], ['<', '>'], text); } text = text.replace(//r?/n/g, '
'); } text = opentag + text + closetag; //对应 [code] + text +[/code],产生相应ubb代码 insertText(text, strlen(opentag), strlen(closetag), false, sel); hideMenu(); div.parentNode.removeChild(div); } return; } else if(cmd.substr(0, 6) == 'custom') { …… …… if(cmd != 'undo') { addSnapshot(getEditorContents()); } if(in_array(cmd, ['bold', 'italic', 'underline', 'fontname', 'fontsize', 'forecolor', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'floatleft', 'floatright', 'removeformat', 'unlink', 'undo', 'redo'])) { hideMenu(); } return ret; }function editorMenu(ctrlid, str) { var div = document.createElement('div'); div.id = ctrlid + '_menu'; …… div.innerHTML = '

' + str + '
 

'; InFloat = InFloat_Editor; showMenu(ctrlid, true, 0, 3); //定义在common.js中 return div; }function insertText(text, movestart, moveend, select, sel) { if(wysiwyg) { if(is_moz || is_opera) { …… //非ie浏览器 } else { //IE浏览器 checkFocus(); if(!isUndefined(editdoc.selection) && editdoc.selection.type != 'Text' && editdoc.selection.type != 'None') { movestart = false; editdoc.selection.clear(); } if(isUndefined(sel)) { sel = editdoc.selection.createRange(); } sel.pasteHTML(text); if(text.indexOf('/n') == -1) { if(!isUndefined(movestart)) { sel.moveStart('character', -strlen(text) + movestart); sel.moveEnd('character', -moveend); } else if(movestart != false) { sel.moveStart('character', -strlen(text)); } if(!isUndefined(select) && select) { sel.select(); } } } } else { …… } } 原文地址: http://blog.nmgline.com/space-115-do-blog-id-101.html