Discuz编辑器简单分析(原创)

Post.php 加载post.htm

 

打开 http://127.0.0.1/bbs/post.php?action=newthread&fid=2 进入发贴页面，查看该页源代码。可以看到<div class=”postbox” id=”postbox”> … </div> 这个div里面就是编辑器的内容了。继续在里面找到 <div id=”e_controls” class=”editorrow”>…. </div> 这里面大概就是格式、工具栏了，通过这些按扭可以设置相关格式，及插入图片，代码等。

在<div id=”e_controls” class=”editorrow”>…</div>里面可以看到如下代码：
<div class=”editorbtn”>
<a id=”e_cmd_bold” title=”粗体”></a>
<a id=”e_popup_simple” title=”粗体 斜体 下划线”></a>
<a id=”e_popup_fontsize” title=”大小”></a>
<a id=”e_popup_forecolor” title=”颜色”></a>
<a id=”e_popup_justify” title=”对齐”></a>
<a id=”e_cmd_createlink” title=”链接”></a>
<a id=”e_cmd_insertimage” title=”图片”></a>
<a id=”e_popup_media” title=”多媒体”></a>
<a id=”e_cmd_quote” title=”引用”></a>
<a id=”e_cmd_code” title=”代码”></a>
<a id=”e_popup_list” title=”列表”></a>
<a id=”e_popup_dent” title=”缩进”></a>
<a id=”e_cmd_table” title=”表格”></a>
<a id=”e_cmd_hide” title=”隐藏内容”></a>
<a id=”e_popup_smilies” title=”表情”></a>
<a id=”e_cmd_custom1_fly” class=”customedit” title=”使内容横向滚动，这个效果类似 HTML 的 marquee 标签，注意：这个效果只在 Internet Explorer 浏览器下有效。”><img src=”images/common/bb_fly.gif” title=”使内容横向滚动，这个效果类似 HTML 的 marquee 标签，注意：这个效果只在 Internet Explorer 浏览器下有效。” alt=”fly” /></a>
<a id=”e_popup_tools” title=”工具”></a>
</div>
这里就是那条工具栏了，可是<a id=”e_cmd_code” title=”代码”></a>中间并没有文字和图片啊，为什么在页面上能显示出 这样的形式呢，那个代码文字就是 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 标签*/

那为什么点击<a id=”e_cmd_code” title=”代码”></a> 这个标签会出现一个插入代码框呢？这其实是通过js来完成的。
Post.php 页面的html代码里有这样的几句
function openEditor(){……} //定义打开编辑器函数
<script src=”include/js/post.js?RzZ” type=”text/javascript” reload=”1″></script>
<script src=”include/js/bbcode.js?RzZ” type=”text/javascript” reload=”1″></script>
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] + ‘:<br /><textarea id=”‘ + ctrlid + ‘_param_1″ style=”width: 98%” cols=”50″ rows=”5″></textarea>’;
  }
  str += cmd == ‘hide’ ? ‘<br /><input type=”radio” name=”‘ + ctrlid + ‘_radio” id=”‘ + ctrlid + ‘_radio_1″ class=”txt” checked=”checked” />只有当浏览者回复本帖时才显示<br /><input type=”radio” name=”‘ + ctrlid + ‘_radio” id=”‘ + ctrlid + ‘_radio_2″ class=”txt” />只有当浏览者积分高于 <input type=”text” size=”3″ id=”‘ + ctrlid + ‘_param_2″ class=”txt” /> 时才显示’ : ”;
  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([‘<‘, ‘>’], [‘&lt;’, ‘&gt;’], text);
    }
    text = text.replace(/r?n/g, ‘<br />’);
   }
   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 = ‘<div class=”popupmenu_option” unselectable=”on”>’ + str + ‘<br /><center><input type=”button” id=”‘ + ctrlid + ‘_submit” value=”提交” /> &nbsp; <input type=”button” onClick=”hideMenu();try{div.parentNode.removeChild(‘ + div.id + ‘)}catch(e){}” value=”取消” /></center></div>’;
 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 {
  ……
 }
}