PHP ckeditor富文本編輯器 結合ckfinder實現圖片上傳功能

一:前端頁面代碼javascript

<script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id="articlecontent" ><?php echo $request['content']; ?></textarea> <script type="text/javascript"> $('#articlecontent').ckeditor({ customConfig : 'config_user.js' }); </script>

其中上面的config_user.js是用戶自定義配置文件,內容以下:php

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

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';

    //自定義配置
    //config.配置項 = 值
    config.width = 800;
    config.height = 300;
    config.uiColor = "#aabbcc";

    //文件的上傳管理:加載CKfinder  注意文件路徑爲網站根目錄 使用時,注意ckfinder文件安裝路徑
    config.filebrowserBrowseUrl      = '/www/res/ckfinder/ckfinder.html';    
    config.filebrowserImageBrowseUrl = '/www/res/ckfinder/ckfinder.html?Type=Images';    
    config.filebrowserFlashBrowseUrl = '/www/res/ckfinder/ckfinder.html?Type=Flash';    
    config.filebrowserUploadUrl      = '/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';    
    config.filebrowserImageUploadUrl = '/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';    
    config.filebrowserFlashUploadUrl = '/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

};


二:ckeditor文件安裝,html

      注意由於在ckeditor中已經自定義了配置文件,注意裏面配置的與ckfinder文件的相對位置前端

三:ckfinder文件安裝java

      須要配置上傳文件的保存路徑,在ckfinder文件夾下的config.php文件中修改windows

 

$baseUrl = 'http://www.example.com/www/articlesuploads/';

      設置文件的保存路徑ide

相關文章
相關標籤/搜索