TinyMCE - 替换图像后提交表单

Question

我正在使用tinymce 4和自定义图片上传处理程序，并在tinymce.activeEditor.uploadImages内进行ajax表单提交。

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

这是代码

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);
        });
    });

Answer 1

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

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

var FR= new FileReader();

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

FR.readAsDataURL( file );

Answer 2

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

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

致电＆＃39;成功＆＃39;功能：

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