[vue] Tinymce リッチ テキスト エディターは、アップロードされた画像を Base64 に変換するのではなく、リンクすることを望んでいます。

前書き: 最近、プロジェクトでリッチテキストエディタを使う必要があり、tinymce がとても良いと思うので使っています プロジェクトでの詳しい使い方は、[vue] Tinymce リッチテキストエディタの使い方を参照して
くださいin vue2
[vue] Tinymce データ エコーの問題 | 初回 通常のエコーの後、空白のバグが表示され編集できません

ここ 2 日間で、新しい問題が発生しました。写真をアップロードした後、アドレス バーを確認したところ、次のとおり、base64 であることがわかりました。一般的には、これは問題ありません。結局のところ、写真

は表示されています。ただし、複数の画像をアップロードするとレスポンスボディが大きくなりすぎるため（バックエンドの応答が遅すぎる、最適化するとbase64画像が大きすぎる）、次のようにechoに直接リンクを貼りたいと思います。

どのように達成するか? たくさんの記事を見つけて、長い間参考にした結果、ようやく理解できたのでまとめておきます。
概要と入門 \ 画像とファイルのアップロード
vue—tinymce 貼り付け画像 [完璧な解決策]
プラグイン \ 貼り付けプラグイン
gitee-wpspaster
tinymce は、貼り付けた画像の自動アップロードを実現します

具体的な操作は以下の通りです。

以前の tinymce の使用法に基づいて変更しました。

ステップ 1: 特定の構成項目を構成して貼り付ける [貼り付け]

tinymce.init({
    
    
  selector: '#tinydemo',
  plugins: 'paste',
  toolbar: 'paste',
  paste_data_images: true // 默认是false的，记得要改为true才能粘贴
})

ステップ2：画像アップロード機能を設定する

images_upload_handler: (blobInfo, success, failure) => {
    
    
  var xhr, formData;
  var file = blobInfo.blob(); //转化为易于理解的file对象
  xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  // 图片上传路由
  xhr.open("POST", process.env.VUE_APP_BASE_API + "/common/upload");
  xhr.onload = () => {
    
    
    var json;
    if (xhr.status != 200) {
    
    
      // failure("上传失败: " + xhr.status);
      return;
    }
    json = JSON.parse(xhr.responseText);
    // json是后端返回的数据，其中就包含链接
    if (!json || typeof json.location != "string") {
    
    
      // failFun("上传成功：");
      // succFun(json.url);
      success(process.env.VUE_APP_BASE_API + json.fileName);
      return;
    }
  };
  formData = new FormData();
  formData.append("file", file, file.name); //此处与源文档不一样
  xhr.setRequestHeader("Authorization", "Bearer " + getToken());
  xhr.send(formData);
},

次のコードはシステム検証を完了し、プロジェクトに応じて調整できます。
xhr.setRequestHeader("Authorization", "Bearer " + getToken());

これまでのところ、画像のレンダリングはリンクの形式で行われています。