kindeditor部署使用图解教程(Startbbs论坛添加编辑器)

QQ图片20150530000919.png

易捷论坛 (http://bbs.vxia.net)用的就是 Startbbs。因为这款源码,时间还不算长,还在更新中,有很多功能不完善。但是最让博主最忍受不了的就是编辑器功能,只能写一些简单的文字,完全没有正常编辑器的功能!

来看下官方的是什么样的

QQ图片20150530000958.png

如图所示,只能写一些文字,编辑好之后就是第一张图的样子。


今天,易捷博客网就给大家制作一个kindeditor编辑器部署教程。

我们拿kindeditor给大家作演示,kindeditor官方网站:http://kindeditor.net/

先把文件下载到电脑上,易捷用4.1.10作演示,我们以简单版作为演示。

QQ截图20150530002748.png

解压后可见以下文件,易捷用红框画的文件夹都可以删除(因为我们作的论坛是PHP的,所以ASP、JSP的都可以直接删除,examples是例子,易捷博客在给大家作演示,所以没有多大用,也可以删除了。)

QQ截图20150530001450.png


把一些没用的文件删除后,把这些文件上传到服务器中,我上传的路径是 /static/common/editor/ ,如果你没有editor这个文件夹,可以手动新建一个。

QQ截图20150530002045.png


把这些都上传好之后,下面,正式开始我们的部署教程!

分别打开 /themes/admin/common/ 和 /themes/default/common/ 中的 header-meta.php

添加以下代码:


<style>
			form {
				margin: 0;
			}
			textarea {
				display: block;
			}
		</style>
		<link rel="stylesheet" href="<?php echo base_url('static/common/editor/themes/default/default.css');?>" />
		<script charset="utf-8" src="<?php echo base_url('static/common/editor/kindeditor-min.js');?>"></script>
		<script charset="utf-8" src="<?php echo base_url('static/common/editor/lang/zh_CN.js');?>"></script>
		<script>
			var editor;
			KindEditor.ready(function(K) {
				editor = K.create('textarea[name="content"]', {
					resizeType : 1,
					allowPreviewEmoticons : false,
					allowImageUpload : false,
					items : [
						'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons', 'image', 'link']
				});
			});
		</script>


一定要注意9-11行中的路径要正确!

QQ截图20150530002616.png


这一步做好之后,刷新下页面,可以看到大概的形状了,但是在评论处,却找不到这样的编辑器。(对于这步,是可选可不选。有些站长认为加上编辑器不错,有些认为不加好些。这个,看个人喜好)

打开 /themes/default/ 中的 topic_show.php 文件,在</head><body>前,添加以下代码:


    <style>
			form {
				margin: 0;
			}
			textarea {
				display: block;
			}
		</style>
		<link rel="stylesheet" href="<?php echo base_url('static/common/editor/themes/default/default.css');?>" />
		<script charset="utf-8" src="<?php echo base_url('static/common/editor/kindeditor-min.js');?>"></script>
		<script charset="utf-8" src="<?php echo base_url('static/common/editor/lang/zh_CN.js');?>"></script>
		<script>
			var editor;
			KindEditor.ready(function(K) {
				editor = K.create('textarea[name="comment"]', {
					resizeType : 1,
					allowPreviewEmoticons : false,
					allowImageUpload : false,
					items : [
						'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons', 'image', 'link']
				});
			});
		</script>


这段代码如果你仔细看的话,跟之前的代码,就差了一个单词,在15处的,content 和 comment 一个是文章,一个是评论


按照上面的步骤,就可以把编辑器部署到主体中了!

但是刷新看下的话,会发现有些错位了。

QQ截图20150530004311.png


这个问题我试了很多方法,想了很多因素,最终确定是一个JS文件,控制了宽度。我把JS文件重新格式化之后,修改了参数,现在可以正常显示。这个JS文件修改的话,有些麻烦,所以我就不发方法了,直接打包给大家。老规则,附件在文章底部。

把这个JS文件上传到 /static/common/editor/ 并替换 kindeditor-min.js 来看下效果

QQ截图20150530004908.png


简单几步,就可以让论坛拥有一个更高级的编辑器。

易捷论坛-http://bbs.vxia.net


JS文件下载地址:

百度网盘:http://pan.baidu.com/s/1pJqmTqr 密码:l3ch

360云盘:http://yunpan.cn/cwxGTfVBkn3qT  访问密码 435d


注:如在后台发表文章,提交后是程序源码的话,再修改下 /themes/default/ 的 topic_show.php 中的 

<?php echo $content['content']?>

改为:

<?php echo htmlspecialchars_decode($content['content'])?>

易捷博客网亲测成功。

易捷论坛-http://bbs.vxia.net



内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.vxia.net/post-571.html

相关推荐

评论

  1. 瀑布流
    2015-07-13 22:51
    真的可以了,但是在手机中会有溢出,我把工具栏换行了,然后内容框能不能让他在手机中自适应呢?
    1. 2015-07-14 06:13
      @瀑布流:感觉startbbs还是有些不太成熟,已弃用。
    1. 2015-07-18 20:35
      @℡若兮相言:有办法内容框自适应吗?我就差这个了
    1. 2015-07-18 20:49
      @瀑布流:现在没再继续玩这个,你试试写个自适应CSS源码
    1. 2015-07-18 21:26
      @瀑布流:成功自适应了,要添加width : "100%",
  1. 2015-05-30 01:11
    没想到源码本身不支持超链接类似的。。。
    1. 2015-07-13 22:59
      @℡若兮相言:添加后发表后文章格式不起做用,白忙活了

你肿么看?

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。