如何在 Vue 中设置 CKfinder 和 CKeditor

Posted 2023-03-31

【中文标题】如何在 Vue 中设置 CKfinder 和 CKeditor

【英文标题】：How to setup CKfinder and CKeditor in Vue

【发布时间】：2019-09-15 01:29:24

【问题描述】：

我正在开发 Vue 项目，并成功地将 CKeditor 与 CKfinder 集成，但是当我点击 CKfinder 图像上传器时，它是打开的 https://ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=Init&lang=en

我可以设置一个本地图片上传文件夹，从中可以找到或上传图片吗？在 Vue 这是我的代码

<template>
   <ckeditor :editor="notesEditor" v-model="form.internal_notes" :config="notesEditorConfig" :class="" @ready="onReady"></ckeditor>
</template>

<script>
   bodyEditor: DecoupledEditor,
        bodyEditorConfig: 
            toolbar: [
                'imageupload', 'ckfinder', '|', 'heading', '|', 'fontFamily', 'fontSize', '|', 'bold',
                'italic',
                'blockQuote', 'imageStyle:full', 'link',
                'alignment', 'numberedList', 'bulletedList', 'insertTable',
                'mergeTableCells', 'undo', 'redo'
            ],
            ckfinder: 
                uploadUrl: '/ckfinder/connector?command=QuickUpload&type=Files&responseType=json',
                filebrowserBrowseUrl: '/ckfinder/browser',
                filebrowserImageBrowseUrl: '/ckfinder/browser?type=Images',
                filebrowserUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Files',
                filebrowserImageUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images'
            
        ,
        notesEditor: DecoupledEditor,
        notesEditorConfig: 
            toolbar: ['bold', 'italic', '|', 'link']
        
</script>

我需要在哪里提及本地路径？

【参考方案1】：

CKfinder 图片上传器已开启https://ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=Init&lang=en

我不确定你的意思是什么，但如果你试图从ckeditor.com 引用演示 CKFinder，这将不起作用。您需要在服务器上本地安装 CKFinder。

---

假设您在本地安装了 CKFinder，您需要在 ckfinder/config.php 文件中配置其服务器端，以便它指向正确的文件夹。 CKFinder 为此使用 Backends 和 Resource Types： https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_backends https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_resourceTypes

后端是存储定义，其中两个最重要的配置设置是root 和baseUrl。 root 指向本地文件系统上的文件夹位置，而baseUrl 指向可通过 HTTP 访问的位置。 这是您需要配置的两项设置。

资源类型是特定类型文件的根文件夹。它们可以连接 具有特定的后端（通过与后端名称匹配的backend 属性）并用于通过directory 属性进一步配置上传的文件路径。

注意： CKFinder 配置中 URL 中的 &type=Images 是应将文件上传到的资源类型的名称。如果您决定修改您的资源类型，则可能还需要修改该参数。