在項目中集成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>