完美替换phpbb3默认编辑器的方法

一跃而过 发布于 2014/11/04 09:48
阅读 2K+
收藏 2

      这段时间,公司需要做一个英文论坛,同时需要后台也是英文的。考虑以后会交给国外公司去打理论坛。很多人都知道国内做论坛第一个想到的就是DZ。但是他官方没有出英文版,同时可能DZ的设计风格不适合外国人的思维。于是将DZ排除了。没办法只有百度了。

      在百度上找到一款叫phpBB3的英文论坛系统。发觉他在英文国家里还是挺受欢迎的。而且网站的免费模板也挺多了的。但是有个缺点就是他的编辑器实在太简陋了,简陋得让人难以想象。不知道是不是因为国外知识产权严格。导致他们不用富文本编辑插件。

     由于公司领导要求一定要修改这个自带的编辑器。没办法我只能硬着头皮上了。由于是国外的论坛系统。国内基本找不到什么教程和文档。好了,废话不多说了直接上教程,我是集成kindeditor4X的版本。

     先看修改后的效果


     1、去kindeditor下载最新版本,解压到styles文件夹下对应的模板文件的template目录里:

  

   2、在模板文件里找到“posting_editor.html”这个。将kindeditor的js与样式文件引入:
  

<script charset="utf-8" src="{T_SUPER_TEMPLATE_PATH}/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="{T_SUPER_TEMPLATE_PATH}/kindeditor/lang/zh_CN.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/kindeditor/plugins/code/code.js"></script>
<script>
KindEditor.ready(function(K) {
 window.editor = K.create('#message',{
        height : '350px',
 items : [
 'selectall', '|', 'undo', 'redo', '|', 'cut', 'copy', 'paste',
 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
 'superscript', '|',
 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
 'italic', 'underline', 'strikethrough', 'lineheight', '|', 'image', 'multiimage',
 'flash', 'media', 'code', 'table', 'hr', 'emoticons',
 'anchor', 'link', 'unlink', 'removeformat', 'clearhtml', '|', 'fullscreen' ,'about'
 ],
 allowFlashUpload : false,
 allowMediaUpload : false
 }); 
 K.ready(function() {
 $(".toface").click(function(){
 var co = $(this).attr("id");
 var ht = editor.html();
 editor.html(ht+'<img src="'+co+'" /> ');
 });  
 });
});
</script> 





     

     3、同样在“posting_editor.html”文件里,找到“<!-- INCLUDE posting_buttons.html -->”这个,大概在114行(对应默认模板),将他删了。

     4、将这段代码:


<div id="smiley-box">
		<!-- IF S_SMILIES_ALLOWED and .smiley -->
			<strong>{L_SMILIES}</strong><br />
			<!-- BEGIN smiley -->
				<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
			<!-- END smiley -->
		<!-- ENDIF -->
		<!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
			<br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
		<!-- ENDIF -->

		<!-- IF BBCODE_STATUS -->
		<!-- IF .smiley --><hr /><!-- ENDIF -->
		{BBCODE_STATUS}<br />
		<!-- IF S_BBCODE_ALLOWED -->
			{IMG_STATUS}<br />
			{FLASH_STATUS}<br />
			{URL_STATUS}<br />
		<!-- ENDIF -->
		{SMILIES_STATUS}
		<!-- ENDIF -->
		<!-- IF S_EDIT_DRAFT || S_DISPLAY_REVIEW -->
			<!-- IF S_DISPLAY_REVIEW --><hr /><!-- ENDIF -->
			<!-- IF S_EDIT_DRAFT --><strong><a href="{S_UCP_ACTION}">{L_BACK_TO_DRAFTS}</a></strong><!-- ENDIF -->
			<!-- IF S_DISPLAY_REVIEW --><strong><a href="#review">{L_TOPIC_REVIEW}</a></strong><!-- ENDIF -->
		<!-- ENDIF -->
	</div>

替换成:


<div id="smiley-box">
		<!-- IF S_SMILIES_ALLOWED and .smiley -->
			<strong>{L_SMILIES}</strong><br />
			<!-- BEGIN smiley -->
				<a href="javascript:void(0)" class="toface" id="{smiley.SMILEY_IMG}"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" al="{smiley.SMILEY_CODE}" titl="{smiley.SMILEY_DESC}" /></a>
			<!-- END smiley -->
		<!-- ENDIF -->
		<!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
			<br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
		<!-- ENDIF -->
	</div>


    5、在后台的样式那里刷新下模板缓存。然后再刷新下页面,怎么样效果是不是出来。  

    最后,那个兔斯基的表情在后台是可以修改的。至于图片的上传功能会稍候写上,急的朋友可以去kindeditor的官网查看教程文档。在这里顺便打个小广告,大家不要介意哦,地址是:http://www.075595.com/ 九五互联的空间,主机的速度与服务都不错哦!





加载中
0
jkingzhou
jkingzhou
试了,但是没效果,好纠结
0
DomainRocker
DomainRocker
试了,但是没效果啊
返回顶部
顶部