ckeditor+ckfinder实例

php版本CKEditor 4和CKFinder安装及配置方法图文教程

下载并解压CKEditor 4和CKFinder

CKEditor 4下载地址：https://ckeditor.com/cke4/builder，选择自定义的版本，记得加上中文语言包

CKFinder下载地址：https://download.cksource.com/CKFinder/CKFinder%20for%20PHP/3.4.4/ckfinder_php_3.4.4.zip

//---------------------第一版本----------------------------------------------------------------------------------

<div id="editor1"></div>

<script src="https://cdn.ckeditor.com/4.9.2/standard-all/ckeditor.js"></script>

<script src="ckfinder/ckfinder.js"></script>
<script>
// Note: in this sample we use CKEditor with two extra plugins:
// - uploadimage to support pasting and dragging images,
// - image2 (instead of image) to provide images with captions.
// Additionally, the CSS style for the editing area has been slightly modified to provide responsive images during editing.
// All these modifications are not required by CKFinder, they just provide better user experience.
if ( typeof CKEDITOR !== 'undefined' ) {
CKEDITOR.disableAutoInline = true;
CKEDITOR.addCss( 'img {max-100%; height: auto;}' );
var editor = CKEDITOR.replace( 'editor1', {
extraPlugins: 'uploadimage,image2',
removePlugins: 'image',
height:250
} );
CKFinder.setupCKEditor( editor );
} else {
document.getElementById( 'editor1' ).innerHTML =
'<div class="tip-a tip-a-alert">This sample requires working Internet connection to load CKEditor 4 from CDN.</div>'
}

</script>

//---------------------第二版本----------------------------------------------------------------------------------

<script src="ckeditor/ckeditor.js"></script>
<script src="ckfinder/ckfinder.js"></script>

<textarea name="editor1" id="editor1"></textarea>


<script type="text/javascript">

// 启用 CKEitor 的上传功能，使用了 CKFinder 插件

CKEDITOR.replace( 'editor1', {

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

});

</script>