呼叫 Discuz 編輯器釋出帖子顯示 html 程式碼的解決辦法

在 discuz 二次開發中呼叫 discuz 的編輯器是一件在所難免的事情，然而 discuz 的開發檔案少得可憐；因此在二次開發的時候檢視原始碼和各種莫名其妙的問題著實令人摸不著頭腦。前面講解了一下呼叫 discuz 編輯器的例項 呼叫 discuz 編輯器再也不是問題了
。然而這只是一個粗糙的例子，而 discuz 帖子儲存在資料庫的卻是自定義的 bbcode 而不是正常的 html 程式碼。這也就導致直接呼叫 discuz 的編輯器發帖顯示出來的帖子成了 html 原始碼。

網上找了很久也沒找到相應的問題，最後透過資料庫的欄位對比才知道問題的所在。

1 、問題所在

呼叫編輯器編輯的原始碼

頂頂頂頂頂<b><i> 的頂頂頂頂頂</i></b> 頂頂頂頂的的<a href="http://127.0.0.1:8080/data/attachment/album/201507/22/112816z1znnm01wmozpvgb.png" target="_blank"><img src="http://127.0.0.1:8080/data/attachment/album/201507/22/112816z1znnm01wmozpvgb.png" border="0" alt=""></a>

而預設發帖的原始碼為

頂頂頂頂頂 [b][i][u] 的頂頂頂頂頂 [/u][/i][/b] 頂頂頂頂的的 [url=data/attachment/album/201507/22/112816z1znnm01wmozpvgb.png][img]data/attachment/album/201507/22/112816z1znnm01wmozpvgb.png[/img][/url]

於是網上找了一通，最後才知道這是 discuz 的特色。對 html 程式碼進行了特殊的處理，其採用了 bbcode 的方式進行二次編碼，顯示帖子的時候再將 bbcode 編碼轉換成正常的 html 程式碼。 discuz 這麼做的目的也顯而易見，最終是為了提高整個應用的安全性。

2 、提交前對 html 進行 bbcode 編碼

static/js/bbcode.js 中的 html2bbcode 可以講正常的 html 編碼轉換成 discuz 自定義的 bbcode 編碼

最後在./static/image/edit/oreditor_function.js 中的 edit_save() 找到了獲取編輯器內容，並設定編碼

var p = window.frames['uchome-ifrHtmlEditor'];
var obj = p.window.frames['HtmlEditor'];
var status = p.document.getElementById('uchome-editstatus').value;
$('uchome-ttHtmlEditor').value = p.document.getElementById('sourceEditor').value;

3 、完整的呼叫方式

<script type="text/javascript" src="{$_G['setting']['jspath']}forum_post.js?{VERHASH}"></script>
<script src="static/js/bbcode.js?{VERHASH}" type="text/javascript"></script>
<script type="text/JavaScript">
  var fid = {$_G['fid']};//外掛所在版塊 ID
</script>
<!--{subtemplate home/editor_image_menu}-->
<textarea class="userData" name="content" id="uchome-ttHtmlEditor" style="height: 100%; width: 100%; display: none; border: 0px"></textarea>
<iframe src='home.php?mod=editor&charset={CHARSET}&allowhtml=1&isportal=0' name='uchome-ifrHtmlEditor' id='uchome-ifrHtmlEditor'  scrolling='no' style='width:85%;height:400px;border:1px solid #C5C5C5;position:relative;' border=0 frameborder=0 ></iframe>
</br>
<input type="hidden" name="formhash" id="formhash" value="{FORMHASH}" />
<input type="hidden" name="posttime" id="posttime" value="{$posttime}" />
<input type="hidden" name="wysiwyg" id="e_mode" value="1" />
<input type="hidden" name="special" value="127" />
<input type="hidden" name="specialextra" value="plugin_test" />
<input type="hidden" id="message" name="message" value="" />
<input id='submit_editsubmit' class='btn' type='button' value='提交'  name='editsubmit' onClick='validate(this);'>
</form>
<script type="text/javascript" src="static/image/editor/editor_base.js?{VERHASH}"></script>
<script type="text/javascript" src="static/image/editor/editor_function.js?{VERHASH}"></script>
<script type="text/javascript">
var textobj = $('uchome-ttHtmlEditor');
var wysiwyg = (BROWSER.ie || BROWSER.firefox || (BROWSER.opera >= 9)) && parseInt('1') == 1 ? 1 : 0;
var allowswitcheditor = parseInt('1');
var allowhtml = parseInt('0');
var allowsmilies = parseInt('1');
var allowbbcode = parseInt('1');
var allowimgcode = parseInt('1');
var simplodemode = parseInt('0');
var fontoptions = new Array("宋體", "新宋體", "黑體", "微軟雅黑", "Arial", "Verdana", "Mingliu", "Helvetica", "Trebuchet MS", "Tahoma", "Impact", "Times New Roman", "仿宋, 仿宋_GB2312", "楷體, 楷體_GB2312");
var smcols = 8;
var custombbcodes = new Array();
</script>
<script type="text/JavaScript">
function validate(obj) {
  var mcpp = window.frames['uchome-ifrHtmlEditor'];
  var mcpobj = mcpp.window.frames['HtmlEditor'];
  edit_save();
  jQuery("#message").val(html2bbcode(mcpobj.document.body.innerHTML));
  window.onbeforeunload = null;
  obj.form.submit();
  return false;
}
</script>

其中 jQuery("#message").val(html2bbcode(mcpobj.document.body.innerHTML)); 是將 html 轉成 bbcode 。

4 、這裡只是 web 前端進行了 bbcode 的編碼。然而如果有需要也可以在 php 處理函式中進行 bbcode 的轉換

$str = "<b><i> 的的頂頂頂頂頂的頂頂頂頂頂頂頂頂頂的的</i></b>";
//html 轉成 bbcode
require_once libfile('function/editor');
echo html2bbcode($str);

echo "</br>";

$str2 = '[b][i] 的的頂頂頂頂頂的頂頂頂頂頂頂頂頂頂的的 [/i][/b]';
//將 bbcode 轉成 html
require_once libfile('function/discuzcode');
echo discuzcode($str2, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0);