CKFinder3主要用于一個檔案上傳器功能的插件，上傳圖片、視頻、檔案等都支持的，非常有好處就是它擁有自帶Ajax檔案管理器，不需撰寫關于ajax的代碼，能提供檔案夾樹形結構，選擇好圖片后只要一點擊上傳服務器即可，相當于把你的圖片已經放在Ajax檔案管理器里，它的功能非常強大，比如可以洗掉、上傳、下載等一些功能，用起來非常方便！

安裝

1.CKEditor4官方下載鏈接:

https://ckeditor.com/ckeditor-4/download/

我選擇是全包的共有72個插件并下載：

2.CKFinder3官方下載鏈接:

https://ckeditor.com/ckfinder/download/#php

這個CKFinder3支持三種編程語言分別是php、.net及java，我一般寫后端都是php，因此選擇php版本，然后選擇下載ZIP，

使用

1.CKEditor4

下載好之后，如何把這富文本編輯器放入網頁中呢？

首先在撰寫html代碼：

<!--富文本編輯器-->
<textarea id="editor" name="editor"></textarea>

為什么要用<textarea>元素，而不用<div>元素呢？因為它本來是文本域，但是對于終端來說，文本域是不可見的，為了生成富文本編輯器的實作，所以必須要用<textarea>元素，

因為它本身是js應用程式，所以需要去加載它，需要在html中引入一個js檔案，注：前提是安裝好CKEditor的目錄，需要根據你CKEditor4的目錄路徑的不同而不同，路徑檔案一定要正確：

<script type="text/javascript" src="../../lib/ckeditor/ckeditor.js"></script>

這個是不可缺少的核心，所以需要呼叫CKEDITOR.replace辦法，否則顯示不了，切記！

<script>

      CKEDITOR.replace( 'editor' );

</script>

最后實作出來了，OK！如下：

2.CKFinder3

下載好之后，這個使用比較簡單，因為它本身是一個插件而已，如何快速地使用？

首先找到檔案路徑ckfinder->ckfinder.html并打開網頁，如果遇到出現這個問題，如下：

這個意思是本身安全的原因，檔案管理器被禁用了，

怎么解決？首先找到檔案路徑ckfinder->config.php并打開，把第29行的flase改成true：

以上的部分內容，如果沒問題的話，可忽略，

最后，ckfinder即可正常使用，注：前提是必須要開服務器（php）的環境下，保證能夠正常使用，否則就會報錯的資訊，

配置

1.CKEditor4

如果你覺得富文本編輯器的工具列插件太多，或者沒必要的插件，這個本身可支持自定義的插件，怎么操作去定制？如下：

首先找到路徑檔案ckdeitor->samples->index.html并打開；打開后，點擊”TOOLBAR CONFIGURATOR”：

點擊后看到如下：

這就是定制的工具列編輯器，你覺得沒必要的插件可取消打勾；有必要的插件可打勾，

如果你覺得定制的工具列沒問題的話，可以點擊“Get toolbar config”，

點擊后就會整個代碼出來，然后把它復制到ckeditor->config.js里面去，

CKEDITOR.editorConfig = function( config ) {
	config.toolbarGroups = [
		'/',
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
		{ name: 'forms', groups: [ 'forms' ] },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
		{ name: 'links', groups: [ 'links' ] },
		{ name: 'insert', groups: [ 'insert' ] },
		'/',
		{ name: 'styles', groups: [ 'styles' ] },
		{ name: 'colors', groups: [ 'colors' ] },
		{ name: 'tools', groups: [ 'tools' ] },
		{ name: 'others', groups: [ 'others' ] },
		{ name: 'about', groups: [ 'about' ] }
	];

config.removeButtons = 'Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,PageBreak,Maximize,ShowBlocks,About,CreateDiv,Blockquote,Outdent,Indent,BidiLtr,BidiRtl,Unlink,Anchor,Language,PasteText,PasteFromWord,Paste,Preview,Print,Flash';
};

如上的就是配置分組是由toolbarGroups設定定義的，如果還要再定制的話，可按照以上的操作步驟，

因此，這就是開發人員最常用的需求，

2. CKFinder3

上傳圖片或視頻是我們最常用的，如何去配置它的介面呢？這個配置很簡單，需要去寫介面即可，把這個介面的代碼復制到ckeditor->config.js，添加如下：

config.filebrowserBrowseUrl='../../lib/ckeditor/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl='../../lib/ckeditor/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl='../../lib/ckeditor/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl ='../../lib/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl='../../lib/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl='../../lib/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

以上的URL值需要根據你的ckfinder路徑檔案位置，切記，路徑檔案一定要正確！！！

最后把CKEditor4+ CKFinder3整合，大功告成！用起來是不是很簡單？

如有問題，歡迎可留言！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/176401.html

標籤：其他

上一篇：前端三劍客（入門）

下一篇：HTML筆記（詳細）

CKEditor4+CKFinder3（php版本）安裝及配置方法

目錄

介紹CKEdiotr4+CKFinder3

安裝

使用

配置