Thinkphp編輯器擴展類kindeditor使用方法

一, 使用前的準備。
使用前請確認你已經建立好瞭一個Thinkphp網站項目。
1,Keditor.class.php和JSON.class.php 是編輯器擴展類文件,將他們復制到你的網站項目的ThinkPHP\Lib\ORG\Net 文件夾下。
2,editor文件夾是kindeditor的核心包。將其復制到你項目的Public文件夾下(和入口文件同級的那個Public),並在Public下再建立一個Upload文件夾,用於存放使用編輯器上傳的圖片。
3,KeditorAction.class.php是編輯器的上傳圖片功能和瀏覽遠程圖片功能,將其復制到你項目的lib\Action 文件夾下。

二, 對象的調用
在控制器方法中調用對象:

import("ORG.Net.Keditor");
$ke=new Keditor();
$ke->id="content";//指定textarea的id
$keshow=$ke->show();//生成js代碼
$this->assign("keshow",$keshow);
$this->display();

在方法對應的模版文件中顯示編輯器:

{$keshow}






上面的是最簡單的調用方法,擴展類還有很多屬性和方法。要想實現更完美的功能,接著往下讀。

三, 對象的屬性
我把屬性分為兩種,一種是kindeditor自帶屬性,一種是擴展新增屬性。如果你以前就使用過kindeditor,你應該知道kindeditor自身有id、items、width、height、afterCreate等等30個屬性。這些屬性現在可以用過php直接定義,比如定義id:$ke->id=”content”,定義寬度:$ke->width=”700px”; 我先說對象新增屬性。
對象的新增屬性:
1,jspath:定義kindeditor的核心js文件,默認值為/Public/editor/kindeditor.js ,如果你的editor文件夾沒有放在Publib下需要指定此屬性,如$ke->jspath=”/kind/ kindeditor.js”;
2,form:指定提交的表單(from)的id,默認為form1,這個屬性是結合ctrl+enter提交功能使用的,比如有個你的編輯器放在表單id為 “formid”內,要實現ctrl+enter提交formid表單,需要定義$ke->form=”formid” 。 ctrl+enter提交功能還要設置其他屬性,後面再講解。
3,imgid:指定存放圖片地址的隱藏域id,默認為img。編輯器每上傳一張圖片,會把圖片地址存儲到該隱藏域。在向伺服器添加數據時,可以把此隱藏域中的數據也保存到伺服器字段中,在刪除數據時候,先讀取伺服器存放的圖片地址,進行刪除。刪除過程隻要調用對象的delimg方法即可,此方法後面詳解。這樣就達到刪除內容同時刪除圖片的目的。
自帶屬性:
1,items:配置編輯器的工具欄,定義方法如
$ke->items=”[‘source’, ‘|’, ‘fullscreen’, ‘undo’, ‘redo’, ‘print’, ‘cut’, ‘copy’, ‘paste’]”;
我增加瞭little關鍵詞,可以快速定義一個精簡模型的編輯器,使用方法$ke->items=”little”;
2,afterCreate:設置編輯器創建後執行的回調函數,定義方法如
$ke->afterCreate=”function(id){
alert(‘成功創建’+id)
}”;
我增加瞭ctrlenter關鍵詞,可以快速定義ctrl+enter提交表單,使用方法:
$ke->afterCreate=”ctrlenter”;
同時需要定義$ke->form=”formname”, formname換為你編輯器所在的表單id。
3,resizeMode:2或1或0,2時可以拖動改變寬度和高度,1時隻能改變高度,0時不能拖動。定義方法如:$ke->resizeMode=1; 註意,數字類型的屬性值不要放在引號中,如$ke->resizeMode=”1”;這麼定義是錯誤的。
4,allowFileManager:true或false,true時顯示瀏覽伺服器圖片功能(點擊上傳圖片按鈕可以看到此功能),定義方法如
$ke-> allowFileManager=ture;
註意,屬性值為佈爾值時不要放在引號中。
5,imageUploadJson指定上傳圖片的伺服器端程式,默認值為 /index.php/Keditor/upload
6,fileManagerJson:指定瀏覽遠程圖片的伺服器端程式,
默認值為/index.php/Keditor/filemanager
註:之前你復制過的KeditorAction.class.php就是供上傳圖片和瀏覽遠程圖片使用的。文件內的upload方法定義瞭上傳圖片處理過程,文件內的filemanager方法定義瞭瀏覽圖片的處理過程。你可以在這兩個方法上加入判斷權限的代碼,實現隻有管理員才能上傳圖片或瀏覽圖片。你也可以不使用默認的KeditorAction.class.php,自己定義上傳處理過程和瀏覽圖片處理過程,則是你需要重新定義imageUploadJson屬性值和fileManagerJson屬性值。 自定義處理過程,後面詳解。
還有其他自帶屬性,我就不一一列舉瞭。大傢可以查看kindeditor官方文檔
https://www.kindsoft.net/doc.php?cmd=config
註意,數字類型或佈爾類型的屬性值,不要放在引號內。其他屬性值放在引號中,屬性值的格式和kindeditor自身格式一樣。

四 對象的方法。
1,upload,上傳圖片。此方法在編輯器上傳圖片處理過程中使用,使用方法:

import("ORG.Net.Keditor");
Keditor::upload('./Public/Upload/','/Public/Upload/',array('gif','jpg','jpeg','png','bmp'),1000000);

upload方法有三個參數,依次是,“上傳圖片目錄”,“圖片顯示地址”,“允許上傳圖片格式”,“允許的圖片大小(單位kb)”
上傳圖片目錄:默認值“./Public/Upload/”(註意Public前面有個“點”符號,是使用的相對地址,不可使用絕對地址),上傳圖片目錄地址是相當於處理文件的。Thinkphp所有的代碼都是通過入口文件運行的,所以這個地址其實是相對於入口文件的。
顯示圖片地址:默認值“/Public/Upload”(一般是絕對地址),假設我們上傳瞭一張圖片,伺服器端生成的圖片名為 12345.gif。上傳會顯示的圖片地址則為/Public/Upload/12345.gif ,因為我們使用的是絕對地址,所以編輯器發佈的內容不管在網站的哪兒,圖片都能正常顯示。
允許上傳的圖片格式:定義一個數組,默認值為array(‘gif’,’jpg’,’jpeg’,’png’,’bmp’)
允許的圖片大小:默認值為,1000000 ,單位是bk。
2,filemanager,瀏覽伺服器的圖片。此方法在瀏覽圖片處理過程中使用。使用方法:

import("ORG.Net.Keditor");
Keditor::filemanager("./Public/Upload/","/Public/Upload/",array('gif','jpg','jpeg', 'png', 'bmp'));

參數依次是:“瀏覽圖片目錄”,“圖片顯示地址”,“允許瀏覽的圖片格式”,和upload方法一樣,瀏覽圖片目錄是相對地址,圖片顯示地址是覺得地址。

3,delimg:刪除通過編輯器上傳的圖片。此方法一般在你刪除伺服器數據時使用。

import("ORG.Net.Keditor");
Keditor::delimg($imgfield);
//$imgfield 一般是你伺服器存放圖片地址的字段。

4,show:返回生成的js代碼。此方法一般在顯示編輯器的控制器中使用。
show方法可以使用一個參數定義kindeditor自帶屬性。如:

import("ORG.Net.Keditor");
$ke=new Keditor();
$ke->show(“{
id : ”content”,
width: ‘700px’;
height : ”300px”;
imgid : ”img”
}”);

不建議用show傳參方式定義kindeditor屬性。show傳參方式不能定義jspath和form兩個新站屬性,也不能使用little和ctrlenter關鍵詞。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *