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

在我的Laravel Vue应用程序中，我在集成CKeditor 4和CKFinder 3方面遇到了一些问题

当我点击我的Ckeditor-CKFinder窗口中的“图像按钮”时，我只想要这个功能，我可以上传所有需要的图像

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

我在我的devtools控制台中有一个错误：“[CKEDITOR]错误代码：cloudservices没有令牌url。”（我想，当我将CKEDITOR与CKFinder正确集成时，这个问题必须得到解决）

（如devtools中的警告）-“[CKEDITOR]错误代码：编辑器插件冲突。{plugin:“image”，替换为：“easyimage”}”

我的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,
            },

        };
    },
...

其他可能有用的细节：

我对Laravel 5.5+（）使用CKFinder 3软件包

在我的ckfinder.php（ckfinder的配置）中，我临时设置了以下代码：

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

我不确定路径（在vue中的配置对象中）：

*我在“public”目录中创建了“filemanager\u storage”目录

---

非常感谢大家的帮助

我最近在一个opencart网站上与php进行了ckeditor4.x集成，我也遇到了类似的问题。虽然vue的环境不同，但这可能会对您有用

我没有使用easyimage插件来管理图像上传，而是将其替换为（增强的图像插件）。下载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”，replacedWith:“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' 
    );

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

 $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' 
    );