kindeditor部署使用图解教程(Startbbs论坛添加编辑器) - 微夏博客网 - 致力于网络优秀资源的分享、交流!

  • 首页
  • 其它
  • kindeditor部署使用图解教程(Startbbs论坛添加编辑器)

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

由 ℡若兮相言 于 2015-5-30 0:08 Saturday 发表,已有3269人观看。

    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



赞赏
X
赞赏方式:
  • 支付宝
  • 微信

打开支付宝扫一扫

标签: 教程 编辑器




↓↓↓↓↓你可能在找下面的内容↓↓↓↓↓

特别申明:若无说明,文章均为原创,转载时请注明本文地址,谢谢合作!
本文链接:
评论:
瀑布流 2015-07-13 22:51
真的可以了,但是在手机中会有溢出,我把工具栏换行了,然后内容框能不能让他在手机中自适应呢?

℡若兮相言 2015-07-14 06:13
@瀑布流:感觉startbbs还是有些不太成熟,已弃用。

瀑布流 2015-07-18 20:35
@℡若兮相言:有办法内容框自适应吗?我就差这个了

℡若兮相言 2015-07-18 20:49
@瀑布流:现在没再继续玩这个,你试试写个自适应CSS源码

瀑布流 2015-07-18 21:26
@瀑布流:成功自适应了,要添加width : "100%",

℡若兮相言 2015-05-30 01:11
没想到源码本身不支持超链接类似的。。。

瀑布流 2015-07-13 22:59
@℡若兮相言:添加后发表后文章格式不起做用,白忙活了

发表评论: