|
目錄 4）kindeditor（可以實現(xiàn)響應(yīng)式） 第一種方式：通過制定textarea元素class選擇器來載入在線文本編輯器 第二種方式：通過替換指定的id選擇器實現(xiàn)文本編輯器的載入 第三種方式：通過jQuery的方式實現(xiàn)文本編輯器的載入 2、創(chuàng)建接收文件，由于文本編輯器內(nèi)容會自帶一些默認(rèn)格式，所以請轉(zhuǎn)義 3、在數(shù)據(jù)庫中創(chuàng)建字段類型為text文本類型 4、在前臺或后臺使用該內(nèi)容時請反轉(zhuǎn)義內(nèi)容 6、鏈接數(shù)據(jù)庫，添加數(shù)據(jù) 1、復(fù)制ckeditor與ckfinder到Public文件夾中 2）在前臺Public文件夾中創(chuàng)建uploads文件夾用于保存上傳文件 5）更改ckeditor中的配置文件config.js或custom.js中調(diào)整路徑，如下 一、在線文本編輯器1、在線文本編輯器使用場景答：網(wǎng)站后臺，OA系統(tǒng)，留言等功能
2、文本編輯器分類那些年濤哥追過的文本編輯器 1）ewebeditor：國產(chǎn)編輯器（收費）
2）fckeditor
3）ueditor（百度在線編輯器）
4）kindeditor（可以實現(xiàn)響應(yīng)式）
5）ckeditor（最著名的文本編輯器）
3、ckeditor的使用1）下載使用網(wǎng)址：http:///，單機Download按鈕，如下圖所示
Basic Package：基礎(chǔ)班，功能較少，體積較小，適合前臺使用 Standard Package：標(biāo)準(zhǔn)版，具有常用功能 Full Package：完全版，具有系統(tǒng)的全部功能 2）ckeditor歷史fckeditor：文本編輯功能與圖片上傳功能整合在一個編輯器中，開源免費的 ckeditor：文本編輯器（只具有文本編輯功能），開源免費的 ckfinder：文件管理系統(tǒng)，收費的 二、ckeditor的使用
如果我們要使用ckeditor，那么一定要載入核心入口ckeditor.js文件 1）參考示例文件
第一種方式：通過制定textarea元素class選擇器來載入在線文本編輯器2）通過定義textarea class=”ckeidtor”來實現(xiàn)對ckeditor文本編輯器的調(diào)用，另外需要添加一個id或name的屬性，如下圖所示：
運行效果如下：
第二種方式：通過替換指定的id選擇器實現(xiàn)文本編輯器的載入
運行效果如下：
第三種方式：通過jQuery的方式實現(xiàn)文本編輯器的載入a）首先載入jquery.js源碼文件
b）載入ckeditor.js入口文件以及適配器jquery.js文件
說明：a)中的jquery.source.js是jQuery源碼文件 b)中的jquery.js是ckeditor為jquery提供的適配器接口文件 c）編寫textarea文本域，并添加id為ckeditor的屬性
運行效果如下：
三、ckeditor文本編輯器配置1、系統(tǒng)配置方式
可以通過config.屬性的方式來修改文本編輯器的配置信息，如下圖所示
效果如下：
注：以上方式不推薦大家使用，因為當(dāng)前的更改會影響到系統(tǒng)中所有文本編輯器的樣式 2、自定義文件修改方式在replace方法中，實際上存在第二個參數(shù)，要求是一個json對象，{}，里面可以放多個屬性，屬性與屬性之間可以通過，逗號隔開
通過以上方式調(diào)用自定義配置文件custom.js也可以實現(xiàn)對文本編輯器的配置 效果如下：
3、接口函數(shù)修改方式直接在replace方法中更改樣式
效果如下：
三種配置方式比較：
四、ckfinder的使用ckfinder：在線文件管理器 1、ckfinder下載地址網(wǎng)址：http:///ckfinder 2、文檔解析
3、ckfinder使用a）復(fù)制ckfinder文件夾到與ckeditor同級項目目錄 如下圖：
b）在ckeditor配置文件中，config.js或custom.js文件中，添加以下代碼 config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images'; config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash'; config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'; 添加完成后，可以看到以下按鈕
c）上傳文件
由于默認(rèn)情況下，ckfinder不允許文件上傳，所以要修改系統(tǒng)配置文件
通過以上更改，可以完成對文件上傳
五、ckfinder配置1、文件上傳路徑配置在ckfinder/config.php文件中，查找以下信息：
默認(rèn)為ckfinder/userfiles 2、縮略圖配置
3、上傳圖片配置
4、用戶權(quán)限配置
5、配置上傳文件類型
6、更改文件上傳路徑
7、中文亂碼解決當(dāng)系統(tǒng)上傳中文文件時，系統(tǒng)會產(chǎn)生亂碼，而導(dǎo)致文件無法讀取
原因：主要是由于系統(tǒng)采用原有文件命名上傳文件，又由于ckfinder是老外編寫的，所以對中文支持不好。 更改上傳圖片名稱，請到以下路徑中去尋找
在文件底部定義生成隨機文件名函數(shù)
打開文件，在82行代碼，添加以下代碼
效果如下：
六、文本編輯器內(nèi)容接收1、創(chuàng)建表單，并為textarea命名
2、創(chuàng)建接收文件，由于文本編輯器內(nèi)容會自帶一些默認(rèn)格式，所以請轉(zhuǎn)義
3、在數(shù)據(jù)庫中創(chuàng)建字段類型為text文本類型4、在前臺或后臺使用該內(nèi)容時請反轉(zhuǎn)義內(nèi)容
5、ckeditor存儲到數(shù)據(jù)庫數(shù)據(jù)庫表設(shè)計
6、鏈接數(shù)據(jù)庫，添加數(shù)據(jù)
7、要用到的知識點
說明：由于文本編輯器里面有很多格式設(shè)置會產(chǎn)生很多特殊字符，無法直接插入到數(shù)據(jù)庫，所以必須要對其進(jìn)行轉(zhuǎn)義，但是在顯示時，由于要顯示原來的樣式，所以可以通過以上函數(shù)進(jìn)行反轉(zhuǎn)義一個要顯示的字符串。
8、視頻插入以youku為例，打開要插入的視頻地址，找到分享給好友
在文本編輯器的源碼區(qū)域插入剛才復(fù)制的html代碼，發(fā)現(xiàn)在點擊回編輯頁面，代碼消失，所以可以判斷ckeditor在新版中已經(jīng)對html以及特殊標(biāo)簽進(jìn)行了過濾 修改ckeditor文件夾中的custom.js文件，添加以下代碼：
保存退出 效果如下：
說明：如是在手機端使用視頻功能，建議使用騰訊視頻或騰訊微視頻來進(jìn)行實現(xiàn)。 七、整合文本編輯器到MVC項目中1、復(fù)制ckeditor與ckfinder到Public文件夾中
2）在前臺Public文件夾中創(chuàng)建uploads文件夾用于保存上傳文件
原因：如上傳到Admin文件夾下的Public/uploads文件中，那么我們的后臺入口就完全暴露了。 3）引入ckeditor接口文件與ckfinder接口文件js代碼
html代碼：
4）設(shè)置文件上傳路徑打開ckfinder下面的config.php，找到63行代碼，如下更改為/Public/uploads文件夾即可
5）更改ckeditor中的配置文件config.js或custom.js中調(diào)整路徑，如下
添加./Public頭 到止為止，大功告成！ |
|
|
