时间戳

首页 > 解决方案 > Laravel Vue.js 与 CKeditor 4 和 CKFinder3（文件管理器）的集成

laravel-5 - Laravel Vue.js 与 CKeditor 4 和 CKFinder3（文件管理器）的集成

问题描述

我在 My Laravel Vue应用程序中集成CKeditor 4和CKFinder 3时遇到一些问题。

当我在我的 Ckeditor 中单击“图像按钮”时，我只想要该功能 - CKFinder 窗口出现并且我能够上传所有需要的图像。

我有什么问题？（一些，但它们必须相互关联）：

  1. 我的 devtools 控制台中有这个错误：“[CKEDITOR] 错误代码：cloudservices-no-token-url。” （我想当我将 CKeditor 与 CKFinder 正确集成时，这个问题必须得到解决）
  2. （作为 devtools 中的警告）- “ [CKEDITOR] 错误代码：编辑器插件冲突。{插件：“图像”，替换为：“easyimage”}“
  3. 我的CKeditor中的“图像按钮”消失了（下面的ckeck截图）： 在此处输入图像描述

您可以使用 ckeditor 的配置查看我的 Vue 组件代码：

...
 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. 我为 Laravel 5.5+ 使用 CKFinder 3 包（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,
    },

*我在“公共”目录中创建了“filemanager_storage”目录

非常感谢大家的帮助！

标签： laravel-5vuejs2ckeditor4.xckfinder

解决方案

我最近在一个带有 php 的 opencart 站点中遇到了关于 ckeditor4.x 集成的类似问题。虽然它与 vue 的环境不同，但也许这对您有用。

我没有使用 easyimage 插件来管理图片上传，而是将其替换为image2（增强型图片插件）。下载 image2 插件并将其放在ckeditor4/plugins/目录下后，请确保将其添加到您的 ckeditor 实例中：

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

关于 ckeditor 实例中的 url，虽然我没有使用 filebrowserBrowseUrl，但我已经声明了 filebrowserUploadUrl：

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

虽然在我的情况下它使图像上传成为可能，但我仍然收到警告[CKEDITOR] 错误代码：编辑器插件冲突。{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' 
    );

让我知道这个解决方案是否适合您的情况。

推荐阅读