Discuz教程网

[二次开发] discuz二次开发调用编辑器发帖显示html何解?

[复制链接]
authicon dly 发表于 2016-2-21 13:07:18 | 显示全部楼层 |阅读模式
本人在 discuz 二次开发时,调用编辑器发帖后显示的是html源代码,找了好久才解决这个问题,本人现在把解决问题的方法分享给大家。
discuz的开发文档很少,在二次开发的时候用discuz的编辑器,显示的是html代码,查看源码和各种莫名其妙的问题着实令人摸不着头脑。而discuz帖子存储在数据库的却是自定义的bbcode而不是正常的html代码。这也就导致直接调用discuz的编辑器发帖显示出来的帖子成了html源码。
网上找了很久也没找到相应的问题,最后通过数据库的字段对比才知道问题的所在。
1、问题所在
调用编辑器编辑的源码
  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>
复制代码

而默认发帖的源码为:
  1. 顶顶顶顶顶[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/editor/editor_function.js中的edit_save()找到了获取编辑器内容,并设置编码.
  1. var p = window.frames['uchome-ifrHtmlEditor'];
  2. var obj = p.window.frames['HtmlEditor'];
  3. var status = p.document.getElementById('uchome-editstatus').value;
  4. $('uchome-ttHtmlEditor').value = p.document.getElementById('sourceEditor').value; //phpfensi.com
复制代码

3、完整的调用方式
  1. <script type="text/javascript" src="{$_G['setting']['jspath']}forum_post.js?{VERHASH}"></script>
  2. <script src="static/js/bbcode.js?{VERHASH}" type="text/javascript"></script>
  3. <script type="text/JavaScript">
  4.     var fid = {$_G['fid']};//插件所在版块ID
  5. </script>

  6. <!--{subtemplate home/editor_image_menu}-->
  7. <textarea class="userData" name="content" id="uchome-ttHtmlEditor" style="height: 100%; width: 100%; display: none; border: 0px"></textarea>
  8. <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>
  9. </br>

  10. <input type="hidden" name="formhash" id="formhash" value="{FORMHASH}" />
  11. <input type="hidden" name="posttime" id="posttime" value="{$posttime}" />
  12. <input type="hidden" name="wysiwyg" id="e_mode" value="1" />
  13. <input type="hidden" name="special" value="127" />
  14. <input type="hidden" name="specialextra" value="plugin_test" />
  15. <input type="hidden" id="message" name="message" value="" />
  16. <input id='submit_editsubmit' class='btn' type='button' value='提交'  name='editsubmit' onClick='validate(this);'>
  17. </form>

  18. <script type="text/javascript" src="static/image/editor/editor_base.js?{VERHASH}"></script>
  19. <script type="text/javascript" src="static/image/editor/editor_function.js?{VERHASH}"></script>


  20. <script type="text/javascript">
  21. var textobj = $('uchome-ttHtmlEditor');
  22. var wysiwyg = (BROWSER.ie || BROWSER.firefox || (BROWSER.opera >= 9)) && parseInt('1') == 1 ? 1 : 0;
  23. var allowswitcheditor = parseInt('1');
  24. var allowhtml = parseInt('0');
  25. var allowsmilies = parseInt('1');
  26. var allowbbcode = parseInt('1');
  27. var allowimgcode = parseInt('1');
  28. var simplodemode = parseInt('0');
  29. var fontoptions = new Array("宋体", "新宋体", "黑体", "微软雅黑", "Arial", "Verdana", "Mingliu", "Helvetica", "Trebuchet MS", "Tahoma", "Impact", "Times New Roman", "仿宋,仿宋_GB2312", "楷体,楷体_GB2312");
  30. var smcols = 8;
  31. var custombbcodes = new Array();
  32. </script>

  33. <script type="text/JavaScript">

  34. function validate(obj) {
  35.     var mcpp = window.frames['uchome-ifrHtmlEditor'];
  36.     var mcpobj = mcpp.window.frames['HtmlEditor'];

  37.     edit_save();
  38.     jQuery("#message").val(html2bbcode(mcpobj.document.body.innerHTML));
  39.     window.onbeforeunload = null;
  40.     obj.form.submit();
  41.     return false;
  42. }
  43. </script>
复制代码

其中jQuery("#message").val(html2bbcode(mcpobj.document.body.innerHTML));是将html转成bbcode。
4、这里只是web前端进行了bbcode的编码,然而如果有需要也可以在php处理函数中进行bbcode的转换.

  1. $str = "<b><i>的的顶顶顶顶顶的顶顶顶顶顶顶顶顶顶的的</i></b>";
  2. //html转成bbcode
  3. require_once libfile('function/editor');
  4. echo html2bbcode($str);

  5. echo "</br>";

  6. $str2 = '[b][i]的的顶顶顶顶顶的顶顶顶顶顶顶顶顶顶的的[/i][/b]';
  7. //将bbcode转成html
  8. require_once libfile('function/discuzcode');
  9. echo discuzcode($str2, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0);
复制代码

Discuz x2.5编辑器代码的设置方法
discuz编辑器可以方便的让用户使用Discuz代码,从而把帖子的用户体验做的更好,一个站长必须掌握编辑的基本方法,相对Discuz论坛来说,就是要熟悉Discuz编辑器代码。
为了让新手更容易上手发帖,在后台--界面--编辑设置--全局设置:
1、默认的编辑器模式:纯文本模式;
2、是否允许切换编辑器模式:是;
3、编辑栏样式:高级。
使用纯文本模式,主要为防止一些新手发帖复制粘贴的问题,过滤掉一些不规范的编辑,让内容看起来更规范。默认使用高级模式也是为了让更多可以使用的功能突显出来,让用户去体验和使用。
编辑器里面的一些功能是通过用户组权限和版块权限来控制,比如音乐、视频、flash的功能,@朋友的功能,隐藏信息的功能,下载远程图片的功能,QQ在线的功能等。
比如:
1、开启音乐、视频、flash的功能,需要在用户组--论坛相关--帖子相关--允许使用 [audio] [media] [flash] 等多媒体代码:选择是;同时版块设置--帖子选项--允许使用 [audio] [media] [flash] 等多媒体代码:选择是;
2、@朋友的功能,隐藏信息的功能,下载远程图片的功能都在用户组权限里面设置,具体可以查看Discuz x2.5 用户组设置策略方法
3、QQ在线的功能:在后台--界面--编辑设置--Discuz代码:QQ勾选可用显示即可,也可以通过详情来编辑不同用户组的使用权限。



上一篇:Discuz教程网签到记录贴-2016年2月21日
下一篇:Discuz在本地测试好后,怎么搬家到网站?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2024-3-29 14:21

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表