开发者社区> 无声胜有声> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

调用discuz编辑器发布帖子显示html代码的解决办法

简介:   在discuz二次开发中调用discuz的编辑器是一件在所难免的事情,然而discuz的开发文档少得可怜;因此在二次开发的时候查看源码和各种莫名其妙的问题着实令人摸不着头脑。前面讲解了一下调用discuz编辑器的实例调用discuz编辑器再也不是问题了。
+关注继续查看

  在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\editor\editor_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);

   5、编辑帖子时出现“您的提交带有不合法参数,谢谢合作”的解决办法

  如果自定义调用discuz编辑器,存储到数据库的时候是bbcode格式。然而,如果编辑的时候也是自定义调用discuz编辑器的话,bbcode格式也就无法正常显示了。如果在php里面直接转换成正常的html格式,这时又会触发discuz的安全机制,无法正常提交。如果配到这样的问题要怎么解决呢?我们可以采用onload事件进行处理,也就是页面加载完成以后用bbcode2html将bbcode编码的内容转换成正常的html再赋值给编辑器。

window.onload = function(){
    var mcpp = window.frames['uchome-ifrHtmlEditor'];
    var mcpobj = mcpp.window.frames['HtmlEditor'];
    mcpobj.document.body.innerHTML = bbcode2html("{$thread['message']}");//加载完成时将bbcode内容转换成正常的html代码并赋值
}

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML+CSS静态博客
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54837849 最近学习了HTML和CSS的一些简答的语法,今天写了一个简单的项目,其实也算不上什么项目,只是一个静态博客,效果图如下: 这个页面使用了所谓的HTML+CSS+div来完成,看起来比之前写的hao123要好看的多,但是其实也写起来也不是很麻烦。
780 0
HTML5 & CSS3初学者指南(3) – HTML5新特性
介绍 本文介绍了 HTML5 的一些新特性。主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件   Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据。
1163 0
HTML5 & CSS3初学者指南(1) – 编写第一行代码
介绍 网络时代已经到来。现在对人们来说,每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址,就像http://www.codeproject.com,等待一下,网页就加载到浏览器窗口中。
1111 0
浅谈html引入css的几种方式
简单来说  一共有四种方式  分别为  行内样式    内联样式  外部样式  @impor导入样式 1、行内样式   行内样式标记在styl属性e中写入css样式,这种方式没有体现css的优势,不推荐使用 &lt;span style="font-size:14px;"&gt; &lt;span style="white-space:pre"&gt; &lt;/spa
1336 0
HTML CSS相关知识点
1.W3C标准:由万维网联盟制定的一系列标准,包括:结构化标准语言(HTML和XML);表现标准语言(CSS);倡导结构、样式、行为分离2.CSS包括三种定位机制:标准文档流(Normal flow)、浮动定位(float)、绝对定位(Absolute positioning)。
726 0
HTML+CSS纯干货就业前基础到精通系统学习2016/9/3
1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接相关标签,实现图文并茂的页面 (4):会使用表格相关标签,实现简单表格,跨行、跨列的复杂表格,并对表格进行美化修饰 (5):会使用表单及表单元素标签,实现表单页面的制作 (6):理解post和get两种提交方式的区别 2:HTML的基本结构 2.1:标题和其他说明信息。
1162 0
HTML+CSS提升小实战
1 2 3 4 几米简介 5 6 *{ 7 margin:0px;padding:0px; 8 } 9 #header{ 10 background:url(images/banner.
1096 0
【HTML、JAVASCRIPT、CSS】2、HTML语言入门2
1、HTML中实现超链接 超链接以标签实现,具体方法如: 无标题文档 打开百度 执行后发现网页中出现了“打开百度”的链接并链接到标签中的网址。
927 0
+关注
无声胜有声
java,架构相关技术专家
312
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载