Larabel Vue.js와 CKeditor 4 및 CKFinder 3의 통합(파일 매니저)

Larabel Vue.js와 CKeditor 4 및 CKFinder 3의 통합(파일 매니저)

My Laravel Vue 앱에서 CKeditor 4와 CKFinder 3을 통합하는 데 문제가 있습니다.

[ Ckeditor - CKFinder ]창에서 [image]버튼을 클릭하면 필요한 이미지가 모두 업로드 됩니다.

어떤 문제가 있습니까? (몇 가지 문제가 있지만 서로 관련이 있어야 합니다.)

1. devtools 콘솔에 "[CKEDITOR]오류 코드: cloudservices-no-token-url" (CKeditor와 CKFinder를 적절히 통합하면 이 문제를 해결해야 한다고 가정합니다)
2. (devtools에서 WARN으로 표시됨) - " [CKEDITOR] 오류 코드: editor-plugin-conflict. {parames: "이미지", 교환 완료포함: "easyimage"} "
3. 내 CKeditor의 "이미지 버튼"이 사라졌습니다(아래 체크 스크린샷).

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. Larabel 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,
       },
   

* 'public' 디렉토리에 'filemanager_storage' 디렉토리를 만들었습니다.

도와주셔서 정말 감사합니다!

최근 php와의 오픈카트 사이트에서 했던 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]에러 코드: editor-plugin-conflict (편집자-플러그인-콘플릭트)라는 경고가 아직 표시됩니다. {parames: "이미지", 교환 완료With: "image2" "아직 풀지 못했지만 적어도 이미지 업로드는 문제없이 할 수 있습니다.

또, 설정을 확인해 주세요.사용자 파일 디렉토리의 BaseUrl 및 루트 경로를 선언한 ckfinder의 php.

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

이 솔루션이 귀사의 경우에 적합한지 알려 주십시오.

언급URL : https://stackoverflow.com/questions/53171456/laravel-vue-js-integration-with-ckeditor-4-and-ckfinder3-file-manager