KindEditor编辑器的使用

KindEditor编辑器是一款不错的编辑器插件，在开发项目中可以直接拿来使用，本文则是现在身为小白的我在对KindEditor编辑器整合到项目中所写的真实性项目使用KindEditor的一次项目记录，当然，不喜勿喷，我只是在记录自己的学习之旅！

好了，现在开始进入正式的话题了，要想使用KindEditor编辑器，我们首先需要要去KindEditor编辑器的官网去下载KindEditor，下载网址为：http://kindeditor.net/down.php。

在下载的时候，我们可以根据KindEditor的相关提示，选择官方下载，或者选择最新源码下载，如下图：

下载之后，我们在本地进行解压，KindEditor编辑器的目录结构如下，我所使用的是kindeditor-4.1.7：

如图所示：

KindEditor编辑器支持asp，jsp,以及php,这里我只介绍我的PHP：

我们进入到php/demo.php中，可以了解到KindEditor编辑器所需要引入的js和css，这里我就不一一介绍了。

直接性的开始我项目中的具体使用方式：

1.我使用的框架是ThinkPHP3.2.3，使用KindEditor编辑器只在后台使用：

我后台的js和css样式目录在config.php中做了一个小小的配置，使用‘TMPL_PARSE_STRING’更改了默认的__PUBLIC__目录：

//自定义配置后台样式的存放目录
'TMPL_PARSE_STRING' => array(
'__PUBLIC__' => __ROOT__ . '/Public/admin',
),

2.前台的js和css引入：

因为后台多处需要使用kindEditor编辑器，所有我在Public目录下新建文件为style.html，使用引入文件，不需要多次复制那么多的css和js，只需要一行<include file = "Public/style" />即可，需要注意的是，Public文件和我们所显示的视图文件属于同级，那么我们在style.html中书写一次js和css的代码即可,代码如下：

<!--引入kindeditor文件开始-->

<link rel="stylesheet" href="__PUBLIC__/js/kindeditor-4.1.7/themes/default/default.css" />
<link rel="stylesheet" href="__PUBLIC__/js/kindeditor-4.1.7/plugins/code/prettify.css" />
<script charset="utf-8" src="__PUBLIC__/js/kindeditor-4.1.7/kindeditor.js"></script>
<script charset="utf-8" src="__PUBLIC__/js/kindeditor-4.1.7/lang/zh_CN.js"></script>
<script charset="utf-8" src="__PUBLIC__/js/kindeditor-4.1.7/plugins/code/prettify.js"></script>
<script>
    KindEditor.ready(function(K) {
      //name="content"需要和input设置的一致
      var editor1 = K.create('textarea[name="content"]', {
        cssPath : '__PUBLIC__/js/kindeditor-4.1.7/plugins/code/prettify.css',
        uploadJson : '__PUBLIC__/js/kindeditor-4.1.7/php/upload_json.php',
        fileManagerJson : '__PUBLIC__/js/kindeditor-4.1.7/php/file_manager_json.php',
        allowFileManager : true,
        afterCreate : function() {
          var self = this;
          K.ctrl(document, 13, function() {
            self.sync();
            K('form[name=example]')[0].submit();
          });
          K.ctrl(self.edit.doc, 13, function() {
            self.sync();
            K('form[name=example]')[0].submit();
          });
        }
      });
      prettyPrint();
    });
  </script>
<!--引入kindeditor文件开始-->

前台页面input示例：

<textarea name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>

引入之后，我们在页面前端只要name值和input设置的name值content一致，或者修改为自己想要设置的name值，只要两者一致，那么我们就可以使用KindEditor编辑器编辑文字和图片，上传图片了！