1. 程式人生 > >thinkphp整合kindeditor編輯器詳解

thinkphp整合kindeditor編輯器詳解

kindeditor編輯器也是一款不錯的編輯器,下面我來給各位介紹thinkphp整合kindeditor編輯器方法,有需要了解的同學可參考。

具體方法

本人使用 的是@version 4.1.2 現在應該有更新了KindEditor 4.1.4 已經發布

KindEditor主要特點
快速:體積小,載入速度快
開源:開放原始碼,高水平,高品質
底層:內建自定義 DOM 類庫,精確操作 DOM
擴充套件:基於外掛的設計,所有功能都是外掛,可根據需求增減功能
風格:修改編輯器風格非常容易,只需修改一個 CSS 檔案
相容:支援大部分主流瀏覽器,比如 IE、Firefox、Safari、Chrome、Opera

下面說一下kindeditor在thinkphp中的使用
步驟1:下載kindeditor編輯器http://www.kindsoft.net/

步驟2:檔案引入

 程式碼如下 複製程式碼

<link rel="stylesheet" href="__PUBLIC__/kindeditor/themes/default/default.css" />

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

步驟3:配置引數

 程式碼如下 複製程式碼

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

<textarea name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>

textarea 中的content和上面 紅色的content對應

kindeditor html程式碼過濾不能儲存

這是因為編輯器預設開啟了過濾模式(filterMode:true)。當filterMode為true時,編輯器會根據htmlTags設定自動過濾HTML程式碼,主要是為了生成乾淨的程式碼。
如果想保留所有HTML,修改kindeditor.js,請將filterMode設定成false。如果想保留特定HTML,請將filterMode設定成true後,配置htmlTags屬性。

轉載自:http://www.111cn.net/phper/thinkPhp/49368.htm