web-dev-qa-db-ja.com

Angular 5でCKEditor5のカスタム画像アップローダーを実装する方法は？

Angular 5を使用したCKEditor5のカスタム画像アップローダーの実装を示す例を探しています。

angularimageuploadimage-uploadingckeditor5
3
Shrinivas

私はこれを比較的少ない手間で動作させることができました。 CKEditorを再構築する必要はありません。基本的な手順は次のとおりです。

コンポーネントで、CKEditor構成オブジェクトを使用してインスタンス変数をまだ定義していない場合は定義します。 extraPlugins要素が含まれている必要があります：

  ckconfig = {
    // include any other configuration you want
    extraPlugins: [ this.TheUploadAdapterPlugin ]
  };

ステップ2は、次のような参照関数をコンポーネントに作成します。

  TheUploadAdapterPlugin(editor) {
    console.log('TheUploadAdapterPlugin called');
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
      return new UploadAdapter(loader, '/image');
    };
  }

ステップ3は、上記の関数で参照された新しいclassを作成します。これは、コンポーネント定義の後に同じTypeScriptファイルで行うことも、別のファイルで作成してインポートすることもできます。

class UploadAdapter {
  loader;  // your adapter communicates to CKEditor through this
  url;
  constructor(loader, url) {
    this.loader = loader;   
    this.url = url;
    console.log('Upload Adapter Constructor', this.loader, this.url);
  }

  upload() {
    return new Promise((resolve, reject) => {
      console.log('UploadAdapter upload called', this.loader, this.url);
      console.log('the file we got was', this.loader.file);
      resolve({ default: 'http://localhost:8080/image/1359' });
    });
  }

  abort() {
    console.log('UploadAdapter abort');
  }

クイックテスト段階で、resolve呼び出しを変更して、固定画像を指すURLを返します。何でもかまいません。そのURL文字列は、ユーザーが画像を配置するエディターコンテンツに貼り付けられます。

実装に行くときは、console.logの各呼び出しを削除するか、必要なロジックに変更します-おそらくAngularのHttpClient。ただし、関数はAngularのNgZoneドメインの外部で実行されることに注意してください。

resolveのロジックは、もちろん適切なURLを生成する必要があります。 loaderと対話する方法の良い例については、 CKEditorドキュメント を確認してください。

最後に、ckeditor要素がckconfig構成を使用していることを確認する必要があります次のようなオブジェクト：

<ckeditor [editor]="Editor" [config]="ckconfig"
              [(ngModel)]="doc.text" name="editcontent"></ckeditor>

このエディターを使用すると、ツールを使用して画像をアップロードします。コンソールログに出力が表示され、エディターのコンテンツに挿入されたresolve呼び出しの文字列が表示されます。文字列が画像への有効なURLである場合、その画像が表示されます。

これがうまくいく場合は、プラグインを完了するのにほとんど問題はないはずです。

生成されたPromiseにはrejectパラメーターがあるので、必要に応じて使用してください。

4
AlanObject

そのアダプターのAngular固有のバージョンは必要ありません。

たとえば、次のように使用できます： https://github.com/pourquoi/ckeditor5-simple-upload または、 CKFinder と統合してみてください。

次に、構成オブジェクトを<ckeditor [config]='config'>コンポーネントに渡すだけです。 allowJs: trueファイルにtsconfig.jsonを設定して、ローカルJSファイルをバンドルできるようにすることを忘れないでください。

または、自分で作成することもできます。これは、 ploadAdapterインターフェース と一致するアップロードアダプターの基本スケルトンである必要があります。

editor.plugins.get( 'FileRepository' ).createUploadAdapter = loader => {
    return new UploadAdapter( loader, editor.config.get( 'uploadUrl' ), editor.t );
}

class UploadAdapter {
    constructor( loader, url, t ) {
        this.t = t; // Translate function
        this.loader = loader;
        this.url = url; // Endpoint URL
    }

    upload() {
        // Perform uploading and return a promise to that action.
    }

    abort() {
        // Abort current upload process.
    }
}

プロセス全体は、ドキュメントでより詳細に説明されています： https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html 。 https://github.com/pourquoi/ckeditor5-simple-upload/blob/master/src/adapter.js のソースコードも確認できます。

次に、ckeditor5-angularパッケージのeditorプロパティを取得するには、readyイベントをリッスンし、エディターパラメーターを取得する必要があります。

<editor [ready]="onReady" ...></editor>

@Component()
class EditorComponent {
     public onReady( editor ) {
          // Now you can acess the editor.
     } 
}

そして、それは基本的にそれです。

3
Maciej Bukowski