在线HTML编辑器 KindEditor
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor
把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。
下载地址:
演示地址:
引入2个JS文件
<script charset="utf-8" src="{$APP_ROOT}/public/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="{$APP_ROOT}/public/kindeditor/lang/zh_CN.js"></script>
上面的{$APP_ROOT} 为自己应用定义的 根目录- 创建 编辑器JS
-
注意:<script> var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name="description"]', { fileManagerJson:ROOT+"public/kindeditor/php/file_manager_json.php", uploadJson:ROOT+"public/kindeditor/php/upload_json.php", resizeType : 1, allowPreviewEmoticons : true, allowImageUpload : true, allowFileManager : true, items : [ 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link','fullscreen','wordpaste','source'] }); }); </script>
- 1.fileManagerJson 为文件管理器的 PHP文件引用地址,用的同时要开启 allowFileManageer:TRUE 的配置
2.uploadJson 为上传图片的 PHP 文件引用地址,用的同时要开启 allowImageUpload:true 的配置
(在只需要上传图片的情况下 ,只需要配置 第二个就可以了)
Html 部分
<textarea id="description" name="description" style="width:560px;height:200px;visibility:hidden;"></textarea>
定义一个,内容框,主要根据ID 或者 name 进行关联
php部分:
require_once 'JSON.php';
$php_path = dirname(__FILE__) . '/';
$php_url = dirname($_SERVER['PHP_SELF']) . '/';
//文件保存目录路径
$save_path = '../../attachment/';
//文件保存目录URL
$save_url = './public/attachment/';
//定义允许上传的文件扩展名
$ext_arr = array(
'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),
// 'flash' => array('swf', 'flv'),
// 'media' => array('swf', 'flv', 'mp3', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'),
// 'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'htm', 'html', 'txt', 'zip', 'rar', 'gz', 'bz2'),
);
//最大文件大小
$max_size = 1000000;
$save_path = realpath($save_path) . '/';
注意的是,如果你把, kindeditor 文件夹放在2级或3级目录就不可以用 $php_path 来进行定位,必须用相对路径
realpath($save_path) . '/';
这个函数的作用是:将相对路径转换成绝对路径,它会根据你相对路径的地址来自动寻址找出绝对的路径;
$save_path
这个参数是上传创建文件时候使用到;
$save_url
这个是在上传完成后,返回给JS中使用,注意的是上面的写法 “ ./ ”是只直接连接根目录
其他的就不解释了,参考文档说明。
-
KindEditor 4.x 文档:
http://www.kindsoft.net/docs/index.html