KindEditor 、UEditor 富文本编辑器使用

时间：2022-08-31 14:49:42

需要引用的文件

<link rel="stylesheet" href="__PUBLIC__/js/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="__PUBLIC__/js/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="__PUBLIC__/js/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="__PUBLIC__/js/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="__PUBLIC__/js/kindeditor/plugins/code/prettify.js"></script>


<div class="row">
    <div class="col-md-1"> <label>内容</label></div>
    <div class="col-md-6">
   <textarea name="content" style="width:700px;height:200px;visibility:hidden;">{$data.content}
</textarea>
    </div>
</div>


<script>
    KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="content"]', {
cssPath : '__PUBLIC__/js/kindeditor/plugins/code/prettify.css',
            uploadJson : '__PUBLIC__/js/kindeditor/php/upload_json.php',
           fileManagerJson : '__PUBLIC__/js/kindeditor/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>

由于要使用编辑器上传图片，所以有时要修改upload_json.php 文件中上传图片的路径。另外要注意函数realpath()，由于文件路径中没有attached 这个文件夹，realpath() 会返回空，导致出错。 

$php_path = dirname(__FILE__) . '/';
$php_url = dirname($_SERVER['PHP_SELF']) . '/';

//文件保存目录路径
$save_path = $php_path . 'attached/';
//文件保存目录URL
$save_url = $php_url . 'attached/';
//定义允许上传的文件扩展名

$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.ready(function (K) {
var editor=KindEditor.create('#content', {
uploadJson : '{:U("attachment/editer_upload")}',
      fileManagerJson : '{:U("attachment/editer_manager")}',
      allowFileManager : true
 });

   K(".submit").click(function (e) {
formcheck();
      var val=editor.text();

   });

});


更深入的用法请查看帮助文档


如果在提交表单的时候不能将编辑器里的内容提交到后台可以这样:

K(".btn-success").click(function (e) {
var val=editor1.text();
    $("textarea[name='content1']").val(val);
    $("textarea[name='content1']").attr("name","Product[content]");
});

在laravel中使用UEditor，请参考  https://github.com/stevenyangecho/laravel-u-editor


，

标签：

相关文章