使用 JS 在 Tinymce 文本编辑器中显示图像的问题

Question

我有代码，图片已上传，returns 我的图片 URL 保存在我的服务器旁边，这个问题总是抛出以下错误，我可以不明白错误或在哪里跌倒。

  var tin = tinymce.init({
    selector: 'textarea#description',
    height: 350,
    menubar: true,
    language: 'es',
    plugins: ['image', 'advlist', 'autolink', 'lists', 'link', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'help', 'wordcount'],
    toolbar: 'undo redo | image | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | removeformat',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
    branding: false,
    relative_urls: false,
    images_upload_handler: function (blobInfo, success, failure){
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST','{{ route("upload_image_no_attach") }}');
        var token = '{{ csrf_token() }}';
        xhr.setRequestHeader("X-CSRF-TOKEN",token);
        xhr.onload = function() {
            // var json;
            // if (xhr.status != 200) {
            //     console.log('HTTP Error: ' + xhr.status);
            //     return;
            // }
            // json = JSON.parse(xhr.responseText);

            // if (!json || typeof json.location != 'string') {
            //     console.log('Invalid JSON: ' + xhr.responseText);
            //     return;
            // }

            // success(json.location);
            if (xhr.status === 200) {
          // this is callback data: url
                const url = JSON.parse(xhr.responseText);//.data;
                const location = `${window.location.origin}/opportunity/image/${url}`;
                console.log(location);
                success(location)
            }
        };

        formData = new FormData();
        formData.append('image',blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);
    }

  });

控制台没有给我带来任何错误，只有 Tinymce 警报显示错误。

控制器

    public function publishImage(Request $request){
        $file_data = File::createFiles($request->all(),null,null);
        return json_encode(['location' => $file_data->pathURL()]);
    }

Answer 1

鉴于您的错误消息，问题似乎出在您对 images_upload_handler 选项的实施中。使用的实现是针对 TinyMCE 4/5，但是鉴于错误消息，您似乎正在使用 TinyMCE 6。TinyMCE 6 进行了一些现代化更改，这是其中之一，现在需要 return a Promise 而不是使用 success 和 failure 回调。

TinyMCE 6 迁移指南和这个具体点可以在这里找到：https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/#images_upload_handler. A newer working example can be found here: https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_upload_handler

因此，要修复该错误，您只需将 TinyMCE 配置更新为如下所示：

  var tin = tinymce.init({
    selector: 'textarea#description',
    height: 350,
    menubar: true,
    language: 'es',
    plugins: ['image', 'advlist', 'autolink', 'lists', 'link', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'help', 'wordcount'],
    toolbar: 'undo redo | image | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | removeformat',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
    branding: false,
    relative_urls: false,
    images_upload_handler: (blobInfo) => {
      return new Promise((success, failure) => {
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST','{{ route("upload_image_no_attach") }}');
        var token = '{{ csrf_token() }}';
        xhr.setRequestHeader("X-CSRF-TOKEN",token);
        xhr.onload = function() {
          // var json;
          // if (xhr.status != 200) {
          //     console.log('HTTP Error: ' + xhr.status);
          //     return;
          // }
          // json = JSON.parse(xhr.responseText);

          // if (!json || typeof json.location != 'string') {
          //     console.log('Invalid JSON: ' + xhr.responseText);
          //     return;
          // }

          // success(json.location);
          if (xhr.status === 200) {
            // this is callback data: url
            const url = JSON.parse(xhr.responseText);//.data;
            const location = `${window.location.origin}/opportunity/image/${url}`;
            console.log(location);
            success(location)
          }
        };

        formData = new FormData();
        formData.append('image', blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);
      });
    }
  });

使用 JS 在 Tinymce 文本编辑器中显示图像的问题

Problems displaying image in Tinymce text editor with JS

tinymce