在项目中集成kindeditor图片上传和编辑器功能

在项目中经常会遇到图片上传或者编辑器，以前使用百度插件，最近发现也kindeditor蛮好用滴

步骤：

1、下载kindeditor放在项目的/Public/kindeditor/

2、配置kindeditor的php文件指定上传图片和文件保存的位置 /Public/kindeditor/php/***

upload_json.phpf 和 file_manager_json.php

#这里配置的/Public/Uploads/ 和 kindeditor同级目录

//根目录路径，可以指定绝对路径，比如 /var/www/attached/
$root_path = $php_path . '../../Uploads/';
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/ $root_url = $php_url . '../../Uploads/';

3、单图片上传
<link rel="stylesheet" href="__PUBLIC__/kindeditor/themes/default/default.css" />

<form action="{:U('Test/index')}" method="post" accept-charset="utf-8">
<input type="text" id="url1" class="input" size="40" name="image" value=""/>
<input type="button" class="btn " id="imgBtn" value="选择图片" />
</form>

<script src="__PUBLIC__/kindeditor/jquery.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/kindeditor/kindeditor-all-min.js" type="text/javascript"></script>
<script src="__PUBLIC__/kindeditor/lang/zh-CN.js" type="text/javascript"></script>
<script>
//上传图片
KindEditor.ready(function(K) {
var editor = K.editor({
allowFileManager : true,
uploadJson:'__PUBLIC__/kindeditor/php/upload_json.php' //图片上传处理文件
});
K('#<span style="font-family: Arial, Helvetica, sans-serif;">imgBtn</span><span style="font-family: Arial, Helvetica, sans-serif;">').click(function() {</span>
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
imageUrl : K('#url1').val(),
clickFn : function(url, title, width, height, border, align) {
K('#url1').val(url);
editor.hideDialog();
}
});
});
});
});
</script>
后台接收：

var_dump($_POST['info[imgage]']);

4、编辑器
<link rel="stylesheet" href="__PUBLIC__/kindeditor/themes/default/default.css" />

<form action="{:U('Test/index')}" method="post" accept-charset="utf-8">
<textarea id="content" class="input" style="height: 300px; width: 100%;" name="info[content]">{$info.content}</textarea>
<button class="btn submit">提交</button>
</form>

<script src="__PUBLIC__/kindeditor/jquery.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/kindeditor/kindeditor-all-min.js" type="text/javascript"></script>
<script src="__PUBLIC__/kindeditor/lang/zh-CN.js" type="text/javascript"></script>
<script type="text/javascript">
//文本编辑器
$(function(){
var content ;
KindEditor.ready(function(K) {
content = K.create('#content',{
allowFileManager : true,
uploadJson:'__PUBLIC__/kindeditor/php/upload_json.php' //图片上传处理文件
});
});
$(".submit").click(function(){
content.sync();
commonAjaxSubmit();
return false;
});
});
</script>



后台接收：
$htmlData = '';
if (!empty($_POST['info[content]'])) {
<span style="white-space:pre"> </span>if (get_magic_quotes_gpc()) {
<span style="white-space:pre"> </span>$htmlData = stripslashes($_POST['info[content]']);
<span style="white-space:pre"> </span>} else {
<span style="white-space:pre"> </span>$htmlData = $_POST['info[content]'];
<span style="white-space:pre"> </span>}
}
var_dump(<span style="font-family: Arial, Helvetica, sans-serif;">$htmlData</span><span style="font-family: Arial, Helvetica, sans-serif;">);</span>