Discuz secondary development Call Editor Post display html what solution?

There are few development documents for discuz. In the second development, the discuz editor is used to display html code. It is confusing to view the source code and various inexplicable problems. Discuz posts are stored in the database with custom bbcode instead of normal html code. This causes the Post displayed by directly calling the discuz editor to become the html source code.

I haven't found any problem on the Internet for a long time. I can only find out the problem through the database field comparison.

1. Problem

Call the source code edited by the editor

<A href = "http: // 127.0.0.1: 8080/data/attachment/album/201507/22/112816z1znnm01w1_pvgb.png "target =" _ blank "> </a>

The default source code for posting is

[/U] [/I] [/B] [/B] [url = data/attachment/album/ 201507/22/112816z1znnm01wmozpvgb.png] [img] data/attachment/album/201507/22/112816z1znnm01wmozpvgb.png [/img] [/url]

So I found a message on the Internet and finally learned that this is a feature of discuz. The html code is specially processed. It uses the bbcode method for secondary encoding. When the post is displayed, the bbcode encoding is converted to the normal html code. The purpose of discuz is to improve the security of the entire application.

2. Perform bbcode encoding on html before submission

Html2bbcode in static/js/bbcode. js can be converted from normal html encoding to custom bbcode encoding in discuz.

Finally, the edit_save () in./static \ image \ editor \ editor_function.js finds the content of the editor and sets the encoding.

Var p = window. frames ['uchome-ifrHtmlEditor '];
Var obj = p. window. frames ['htmleditor '];
Var status = p.doc ument. getElementById ('uchome-editstatus'). value;
$ ('Uchome-ttHtmlEditor '). value = p.doc ument. getElementById ('sourceeditor'). value;

3. Complete call method

<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 of the section where the plug-in is located
</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 = '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" cmd.val(html2bbcode(mcpobj.doc ument. body. innerHTML ));
Window. onbeforeunload = null;
Obj. form. submit ();
Return false;
}
</Script>

JQuery ("# message" cmd.val(html2bbcode(mcpobj.doc ument. body. innerHTML); Converts html to bbcode.

4. The bbcode code is only performed on the web front end.However, if necessary, you can convert the bbcode in the php processing function.

$ Str = "<B> <I> top-down, top-down, and top-down </I> </B> ";
// Convert html to bbcode
Require_once libfile ('function/editor ');
Echo html2bbcode ($ str );

Echo "</br> ";

$ Str2 = '[B] [I] the [/I] [/B]' of the top, and top of the top;
// Convert the bbcode into html
Require_once libfile ('function/discuzcode ');
Echo discuzcode ($ str2, 0, 0, 0, 1, 1, 0, 0, 0, 0 );

How to set the Discuz x2.5 editor code

The discuz editor allows users to conveniently use the Discuz code, so as to improve the user experience of the post. A webmaster must master the basic editing method. Compared with the Discuz forum, is to be familiar with the Discuz editor code.

To make posting easier for beginners, go to the backend -- interface -- edit settings -- global settings:

1. Default editor mode: Plain text mode;

2. Whether to switch the editor mode: yes;

3. Edit the bar style: advanced.

The plain text mode is used to prevent the copying and pasting of some new posts, filter out some nonstandard edits, and make the content look more standard. By default, the advanced mode is used to highlight more available features and allow users to experience and use them.

Some functions in the editor are controlled through user group permissions and forum permissions, such as music, video, flash, @ friend, hide information, and download remote images, QQ online functions.

For example:

1. To enable the functions of music, video, and flash, you need to use [audio] [media] [flash] and other multimedia code in the user group-Forum-Post-related mode: select yes; at the same time, set Forum -- Post options -- allow the use of [audio] [media] [flash] and other multimedia code: select yes;

2. @ friends, hide information, and download remote images are all set in user group permissions. For details, refer to the policy setting method of Discuz x2.5 user group.

3. Functions of QQ online: Click "Display available" on the backend -- interface -- edit settings -- Discuz code: Select "Display available" on QQ. You can also edit the permissions of different user groups through details.

You can also add your own editor code. You can add your favorite Discuz code according to the background prompts.