1. 程式人生 > >KindEditor 、UEditor 富文字編輯器使用

KindEditor 、UEditor 富文字編輯器使用

需要引用的檔案

<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