web-dev-qa-db-ja.com

ReactJSを使用してCKEditor 5でアップロードアダプターを構成する方法

編集：私はGithubで問題をオープンしました： https://github.com/ckeditor/ckeditor5-editor-classic/issues/98

私はこれを理解しようと約2日間費やしました。

エディターは正常に動作しますが、画像を追加しようとするとエラーが発生します。

filerepository-no-upload-adapter：アップロードアダプターが定義されていません。詳細： https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

ドキュメントを何時間も閲覧しましたが、解決策を見つけることができませんでした。以下に、私が従おうとしたドキュメントの手順を示します。

これは私のコードです：

import React, { Component } from 'react'; 
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

console.log(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));

class EditorComponent extends Component {
    constructor(props) {

      super(props);

      this.state = {
        id: props.id,
        content: props.content,
        handleWYSIWYGInput: props.handleWYSIWYGInput,
        editor: ClassicEditor
      }

    } 

    render() {
        return (
            <div className="Editor-content">
                <CKEditor
                    editor={ this.state.editor }
                    data={this.state.content}
                    onInit={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        //this.state.handleWYSIWYGInput(this.props.id, data);
                        console.log( { event, editor, data } );
                        console.log(this.state.content);
                    } }
                    onBlur={ editor => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ editor => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default EditorComponent;

エラーでリンクを開くと、次のように表示されます。

CKEditor 5ビルドのいずれかを使用しているときにこの警告が表示された場合は、それらのビルドでデフォルトで使用可能なアップロードアダプターを構成していないことを意味します。

ビルドで利用可能なアップロードアダプターとその構成方法については、包括的な「画像アップロードの概要」をご覧ください。

次に、このリンクをたどることができます： https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html

これにより、アップロードアダプターを構成するためのいくつかのオプションが提供されます。 CKFinderを使用したいので、次のようにします。 https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/ckfinder.html

そして、あなたはこれを読みます：

この機能は、すべてのビルドでデフォルトで有効になっています。

だから、私は機能がすべてのビルドに存在すると思いますが、それでも「設定」する必要があります。 ReactJSでこれを行うにはどうすればよいですか？

ページにリンクされたコードを実装しようとしましたが、構文がReactJSで機能せず、とにかくimport CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';は別のエラーを生成します：

ckeditor-duplicated-modules：一部のCKEditor 5モジュールが複製されています。詳細： https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

ドキュメントのページのコード：

import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ CKFinder, ... ],

        // Enable the "Insert image" button in the toolbar.
        toolbar: [ 'imageUpload', ... ],

        ckfinder: {
            // Upload the images to the server using the CKFinder QuickUpload command.
            uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
        }
    } )
    .then( ... )
    .catch( ... );

どうすれば機能させることができますか？

javascriptreactjsimageckeditor
3
devamat

これを機能させるには、次のものだけを追加します。

config={{ckfinder: {
    // Upload the images to the server using the CKFinder QuickUpload command
    // You have to change this address to your server that has the ckfinder php connector
    uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}}}

コードのこの部分を追加すると、アップロードアダプターエラーが表示されなくなります。サーバー側を設定するまで、これは画像をuploadしません。次の手順に従って、phpコネクタをインストールできます。 https://ckeditor.com/docs/ckfinder/ckfinder3-php/quickstart.html

完全なコード：

import React, { Component } from 'react'; 
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

console.log(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));

class EditorComponent extends Component {
    constructor(props) {

      super(props);

      this.state = {
        id: props.id,
        content: props.content,
        handleWYSIWYGInput: props.handleWYSIWYGInput,
        editor: ClassicEditor
      } 

    } 

    render() {
        return (
            <div className="Editor-content">
                <CKEditor
                    editor={ this.state.editor }
                    data={this.state.content}
                    config={{ckfinder: {
                      // Upload the images to the server using the CKFinder QuickUpload command.
                      uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
                    }}}
                    onInit={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        //this.state.handleWYSIWYGInput(this.props.id, data);
                        console.log( { event, editor, data } );
                        console.log(this.state.content);
                    } }
                    onBlur={ editor => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ editor => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default EditorComponent;
0
devamat

Reactでckeditor設定を構成する方法に混乱していると思います。ほとんどの人は最初は私でしたが、反応コンポーネントのckeditorで設定を行うには、次のようにする必要があります。 I Reactこれはconfigをオブジェクトとして受け取り、プラグインを追加および削除する方法で内部に別のオブジェクトを受け取ります。

CKeditor 5のドキュメントの例を示します https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#using-ckeditor-5-source

<CKEditor
    data="<p>Editor' content</p>"
    config={ {
        plugins: [ CKFinder, ... ],
        toolbar: [ 'imageUpload', ... ],
        ckfinder: {
            uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
        }
    } }
/>
0
user4957000