TinyMCE - 替换图像后提交表单答案

【问题标题】：TinyMCE - Submit form after image is replacedTinyMCE - 替换图像后提交表单
【发布时间】：2016-12-27 09:58:55
【问题描述】：

我正在使用带有自定义图像上传处理程序的 tinymce 4，并在 tinymce.activeEditor.uploadImages 中提交 ajax 表单。

问题是，图片上传后立即调用uploadImages回调，之前在编辑器中替换图片url。由于这个图像仍然像 img src="data:image/png;base64,undefined" alt="" width="534" height="232" /> 而不是实际的服务器 url。

这是代码

tinymce.init({
        selector: '#mytextarea',
        menubar: false,
        plugins: [
            ...
        ],
        automatic_uploads: true,
        file_picker_callback: function (cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            input.onchange = function () {
                var file = this.files[0];

                var id = 'blobid' + (new Date()).getTime();
                var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                var blobInfo = blobCache.create(id, file);
                blobCache.add(blobInfo);

                // call the callback and populate the Title field with the file name
                cb(blobInfo.blobUri(), {title: file.name});
            };

            input.click();
        },
        images_upload_handler: function (blobInfo, success, failure) {
            var formData = new FormData();
            formData.append('attachedFile', blobInfo.blob(), blobInfo.blob().name);

            $.ajax({
                url: '/myUploadUrl?method=uploadFile&param1=' + someParam,
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function (data) {
                    success(data.location);
                }
            });
        },
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        }
    });

要提交表单，我正在执行以下操作

tinymce.activeEditor.uploadImages(function (success) {
        $.post('/mySubmitUrl?method=save', $('#myForm').serialize(), function (response) {
            location.reload(true);
        });
    });

【问题讨论】：

标签： javascript tinymce tinymce-4

【解决方案1】：

我遇到了类似的问题并用 FileReader 解决了它：

cb = 回调（在您的情况下：成功）

var FR= new FileReader();

FR.addEventListener("load", function(e: any) {
    cb(e.target.result, { title: file.name });
});

FR.readAsDataURL( file );

【讨论】：

【解决方案2】：

如果您想在编辑器中替换图像后提交表单，只需调用此代码

    $.post('/mySubmitUrl?method=save', $('#myForm').serialize(), function (response) {
        location.reload(true);
    });

调用“成功”函数后：

    success: function (data) {
        success(data.location);
        // call it from here!
    }

【讨论】：