Troubleshoot problems with using the Discuz editor to publish posts to display HTML code

It is unavoidable to call Discuz's editor in Discuz two development, but Discuz's development documentation is woefully poor; so it's confusing to look at the source code and all sorts of puzzling questions at two development times. I explained earlier that invoking the instance of the Discuz editor calls the Discuz editor is no longer a problem. However, this is just a rough example, and discuz posts are stored in a database with custom BBCode rather than normal HTML code. This also causes the direct call Discuz Editor post to display the HTML source code.

Search on the internet for a long time did not find the corresponding problems, and finally through the database field comparison to know the problem lies.

1, the problem lies

Invoke editor Editor's source code

Top Top top <b><i> top top top </i></b> top top top <a href= "Yun_qi_img/112816z1znnm01wmozpvgb.png" target = "_blank" ></a>
and the default source of the post is

Top top top [b][i][u] top top [/u][/i][/b] top top [url=data/attachment/album/201507/22/112816z1znnm01wmozpvgb.png][img] Data/attachment/album/201507/22/112816z1znnm01wmozpvgb.png[/img][/url]
So the internet to find a pass, and finally know that this is the characteristics of discuz. The HTML code is handled in a special way, which uses the BBCode method to encode two times, and then converts the BBCode code into normal HTML code when the post is displayed. Discuz's purpose is also obvious, and ultimately to improve the security of the entire application.

2, before the submission of HTML BBCode coding

Html2bbcode in Static/js/bbcode.js can translate normal HTML encoding into Discuz custom BBCode encoding

Finally, the Edit_save () in the./static\image\editor\editor_function.js found the Get editor content and set the encoding

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, the complete call mode

<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 ']};//plugin location 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= ' Submit ' name= ' Editsubmit ' onclick= ' (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 ("XXFarEastFont-Arial", "Neo-Arial", "bold", "Microsoft Ya-hei",
"Arial", "Verdana", "MingLiU",
"Helvetica", "Trebuchet MS", "Tahoma", "Impact", "Times New Roman",
"Imitation, Imitation _gb2312", "italics, italics _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>
where jquery ("#message"). Val (Html2bbcode (Mcpobj.document.body.innerHTML)), is to turn HTML into BBCode.

4, here is only the Web front-end BBCode coding. However, if necessary, you can also perform bbcode conversions in PHP processing functions.

$str = "<b><i> top top roof top top on top top roof </i></b>";
HTML turn into BBCode
Require_once libfile (' function/editor ');
echo Html2bbcode ($STR);

echo "</br>";

$str 2 = ' [B][i] ' top top top of top-top top top top of [/i][/b];
Turn BBCode into HTML
Require_once libfile (' Function/discuzcode ');
Echo Discuzcode ($str 2, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0);