Laravel Vue.js 與 CKeditor 4 和 CKFinder3（文件管理器）的集成

Question

我在我的Laravel Vue應用程序中集成CKeditor 4和CKFinder 3 時遇到了一些問題。

我只想要在我的 Ckeditor 中單擊“圖像按鈕”時的功能 - 出現 CKFinder 窗口並且我能夠上傳所有需要的圖像。

我有什么問題？ （一些，但它們必須相互關聯）：

1. 我的 devtools 控制台中有這個錯誤： “[CKEDITOR] 錯誤代碼：cloudservices-no-token-url。” （我認為當我將 CKeditor 與 CKFinder 正確集成時，必須解決該問題）
2. （如 devtools 中的 WARN ）- “[CKEDITOR] 錯誤代碼：editor-plugin-conflict。{plugin：“image”，replaceWith：“easyimage”}”
3. 我的 CKeditor 中的“圖像按鈕”消失了（下面的 ckeck 屏幕截圖）：

你可以看到我的 Vue 組件代碼和 ckeditor 的配置：

...
 export default {
    components: { VueCkeditor },
    data() {
        return {
            content: '',
            config: {
                toolbar: [
                    { name: 'styles', items : [ 'Styles','Format', 'FontSize' ] },
                    { name: 'clipboard', items : ['Undo','Redo' ] },
                    { name: 'editing', items : [ 'Scayt' ] },
                    { name: 'insert', items : [ 'Image','Table','HorizontalRule','SpecialChar','Iframe' ] },
                    { name: 'tools', items : [ 'Maximize' ] },
                    '/',
                    { name: 'basicstyles', items : [ 'Bold','Italic','Strike','RemoveFormat' ] },
                    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
                    { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
                ],
                height: 400,
                extraPlugins: 'autogrow,uploadimage',
                filebrowserBrowseUrl: '/filemanager_storage?type=Files',
                filebrowserUploadUrl: '/filemanager_storage/upload?type=Files&_token='+window.Laravel.csrfToken,
            },

        };
    },
...

其他可能有用的細節：

1. 我將 CKFinder 3 包用於 Laravel 5.5+ ( https://github.com/ckfinder/ckfinder-laravel-package )

2. 在我的 ckfinder.php（CKFinder 的配置）中，我暫時設置了該代碼：

    $config['authentication'] = function () { return true; };

3. 我不確定那個路徑（在我的 vue 配置對象中）：

    filebrowserBrowseUrl: '/filemanager_storage?type=Files', filebrowserUploadUrl: '/filemanager_storage/upload?type=Files&_token='+window.Laravel.csrfToken, },

*我在“public”目錄中創建了“filemanager_storage”目錄

非常感謝你們的幫助！

Answer 1

我最近在一個帶有 php 的 opencart 站點中遇到了關於 ckeditor4.x 集成的類似問題。 雖然它與 vue 的環境不同，但也許這對您有用。

我沒有使用 easyimage 插件來管理圖片上傳，而是將其替換為image2 （增強型圖片插件）。 下載 image2 插件並將其放在ckeditor4/plugins/目錄下后，請確保將其添加到您的 ckeditor 實例中：

extraPlugins : 'image2',
removePlugins: 'easyimage,cloudservices'

關於 ckeditor 實例中的網址，雖然我沒有使用 filebrowserBrowseUrl ，但我已經聲明了 filebrowserUploadUrl ：

filebrowserUploadUrl:  '/path_where_ckfinder_is_installed/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json

雖然在我的情況下它使圖像上傳成為可能，但我仍然收到警告[CKEDITOR] 錯誤代碼：editor-plugin-conflict。 {plugin: "image", replaceWith: "image2"} "這是我還無法解決的問題，但至少在我的情況下，圖像上傳工作沒有大驚小怪。

另外，請確保在 ckfinder 的 config.php 中聲明了用戶文件目錄的 BaseUrl 和根路徑，即

 $config['backends'][] = array(
        'name'         => 'default',
        'adapter'      => 'local',
        'baseUrl'      => $your_file_path,
        'root'         => '/your_root_dir/' . $your_file_path,  // Can be used to explicitly set the CKFinder user files directory.
        'chmodFiles'   => 0777,
        'chmodFolders' => 0755,
        'filesystemEncoding' => 'UTF-8' 
    );

讓我知道此解決方案是否適合您的情況。