而且可以用直接上傳和ajax兩種方式處理內容。為了給一些還沒能成功地集成fckeditor的同儕們一些啟發與幫助,
茲將我的經驗與體會描述如下:應用目的:將FCKeditor編輯器集成到Thinkphp中,使用戶能夠在線像編輯Word一樣處理即將發表的文字與圖像。
應用軟件與環境:apache服務器2.0以上版本,PHP版本5.0以上,mysql5.0以上;Thinkphp版本1.5或以上,Fckeditor版本2.x。
應用步驟:
1、下載FCKeditor2.x版本,將解壓后的文件夾FCKeditor復制到ThinkPHP文件夾下的Vendor目錄下,以便符合THinkPHP的第三方類庫引入規則。
2、修改參數:
首先,用EditPlus等軟件打開FCKeditor目錄下的fckeditor_php5.php文件,找到第130行。出現內容如下:
復制代碼 代碼如下:
public function __construct( $instanceName )
{$this->InstanceName = $instanceName ;
$this->BasePath= ' ' ;
$this->Width = '900′;
$this->Height = '400′;
$this->ToolbarSet = 'Default' ;
$this->Value = ' ';
$this->Config = array() ;
}
public function __construct( $instanceName ){$this->InstanceName = $instanceName ;
$this->BasePath = '/bm/ThinkPHP/Vendor/FCKeditor/' ;$this->Width = '900′;$this->Height = '400′;
$this->ToolbarSet = 'Default' ;$this->Value = ”;
其中,最關鍵的就是將Basepath設置好。
里面填寫的就是fckeditor_php5.php文件相對于網站文檔根目錄(document root)的路徑。
其實這就是用以表征FCKeditor編輯器相對根目錄的路徑。比如服務器的文檔根目錄最下級是htdocs/或www/,
項目名為project,project項目文件夾下有Thinkphp系統文件包與項目文件包myapp。而且服務器沒有對該項目設置虛擬主機的話,
此時的文檔根目錄仍是www/或htdocs/,那么應該是$this->BasePath='/project/ThinPHP/Vendor/FCKeditor/';
若是設置了虛擬主機,即將project變為虛擬的文檔根目錄,通過某一域名能夠直接訪問網站項目的話,那么此時,
$this->BasePath='/ThinPHP/Vendor/FCKeditor/';
其他的參數如寬度與高度可以填或不填,若填下的話就是編輯器的默認高與寬。InstanceName是編輯器所在標簽的id與name,此時不用理會。其他參數也不用理會。
其次,在FCKeditor\editor\filemanager\connectors\php\下面找到config.php文件,打開它,找到30與34行。需要改寫的參數如下:$Config['Enabled'] = true ;
$Config['UserFilesPath'] = ' ' ;
其中,第一個參數應該設為true.默認是true.第二個參數填寫的是上傳文件的路徑,比如要顯示的圖片等。
我們在project目錄下建立一個uploads文件夾,那么$Config['UserFilesPath'] = ' /project/uploads/';
路徑規則與上一個basepath一樣。要是project是虛擬文檔根目錄的話,那么$Config['UserFilesPath'] =' /uploads/';
3、應用程序:
比如在myapp項目中Lib目錄下IndexAction.class.php控制器類中的index方法中,當訪問該程序時,輸出的模板網頁里有form表單,
要求用戶輸入一篇文章,那么就可以用到編輯器.代碼示例如下,只顯示與fckeditor有關的代碼,其他代碼會略。
首先是服務器程序:
復制代碼 代碼如下:
public function index()
{……//其他代碼
vendor(“FCKeditor.fckeditor”);//包含FCKeditor類庫,TP引入第三方類庫的系統方法,其路徑是相對于vendor目錄來說的。
$editor= new FCKeditor(); //實例化FCKeditor對象
$editor->Width='980′;//設置編輯器實際需要的寬度。此項省略的話,會使用默認的寬度。
$editor->Height='400′;//設置編輯器實際需要的高度。此項省略的話,會使用默認的高度。
$this->Value=”;//設置編輯器初始值。也可以是修改數據時的設定值。可以置空。
$editor->InstanceName='comment';//設置編輯器所在表單內輸入標簽的id與name,即input>標簽的id與name。此處假
//設為comment.此處不可省,也要保持唯一性。表單上傳到服務器處理程序后,即可通過$_POST['comment']來讀取。
$html=$editor->Createhtml();//創建在線編輯器html代碼字符串,并賦值給字符串變量$html.
$this->assign('html',$html);//將$html的值賦給模板變量$html.在模板里通過{$html}可以直接引用。
…….//其他代碼,包括輸出模板。
}
其次是對應的html模板即index 文件。只需要在需要的地方插入編輯器即可,其他代碼與一般的form>寫法一樣。
…….!–其他html代碼 –>
div>
form id=”commentform” name=”commentform” action=”">//action里填寫表單處理程序,如'__APP__/Index/check'。
指的是IndexAction類下的check()方法來處理提交的表單數據。
復制代碼 代碼如下:
table style=”width:100%;”>
tr>
td style=”text-align:left;”>添加新評論:
/td>
/tr>
……//其他表單填寫項
tr>
td > {$html}/td>
/tr>
tr>
td>input type=”submit” value=”提交評論” >
/td>
/tr>
/table>
/form>
/div>
到這里, 已經可以用了。在表單處理程序里像通常處理表單元素那樣就行。但是,有的時候項目移植后,上傳的圖片等鏈接路徑會被錯誤編譯,
以致不能正確顯示圖片等東西。通常是雙引號解析錯誤,我還沒有解決。要想不出錯的話,可以采取ajax的方式處理表單數據。
不過在進行ajax處理之前,要先用一段js代碼將編輯器中的值賦給表單中name是instacename的值的表單元素。比如,
本項示例中要用ajax對表單進行處理的話,index模板文件中必須在表單處理前運行的一段js代碼為:
…….//其他js代碼
var editor=FCKeditorAPI.GetInstance('comment');//comment是設置的instanceName值.
document.commentform.comment.value=editor.EditorDocument.body.innerHTML;//將編輯器中內容處理后的源代碼
//賦值給commentform表單的comment 屬性元素值。
……//其他js代碼
注:個人認為xajax比較不錯,只需要將主要精力花在后臺程序上。我也是用xajax進行數據處理的。前臺代碼很簡單。
您可能感興趣的文章:- thinkphp3.2嵌入百度編輯器ueditor的實例代碼
- ThinkPHP中使用Ueditor富文本編輯器
- ThinkPHP自動轉義存儲富文本編輯器內容導致讀取出錯的解決方法
- TP3.2.3框架使用CKeditor編輯器在頁面中上傳圖片的方法分析
- 利用Electron簡單擼一個Markdown編輯器的方法
- 利用Vue實現一個markdown編輯器實例代碼
- vue中利用simplemde實現markdown編輯器(增加圖片上傳功能)
- SpringBoot使用Editor.md構建Markdown富文本編輯器示例
- Thinkphp5框架中引入Markdown編輯器操作示例