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



展开阅读全文

没有更多推荐了,返回首页