在 TinyMCE 4 图像上传中使用数据 URI 而不是 blob

Question

使用 TinyMCE 4，我正在尝试做一个基本的本地文件选择器，例如 their example 中使用的那个。

运行他们的示例后，我注意到生成的图像源是一个 blob，而不是 base64。

所以我的问题是：是否可以使用 base64 代替 blob？

我认为file_picker_callback 回调的第一个参数将用作图像的源，因此我使用this answer 调整了代码，其中我将数据URI 作为第一个参数传递。

file_picker_types: 'image', 
// and here's our custom image picker
file_picker_callback: function (cb, value, meta) {
    var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');

    // Note: In modern browsers input[type="file"] is functional without 
    // even adding it to the DOM, but that might not be the case in some older
    // or quirky browsers like IE, so you might want to add it to the DOM
    // just in case, and visually hide it. And do not forget do remove it
    // once you do not need it anymore.

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

        reader.onload = function () {

            // Note: Now we need to register the blob in TinyMCEs image blob
            // registry. In the next release this part hopefully won't be
            // necessary, as we are looking to handle it internally.
            //var id = 'blobid' + (new Date()).getTime();
            //var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
            //var base64 = reader.result.split(',')[1];
            //var blobInfo = blobCache.create(id, file, base64);

            //blobCache.add( blobInfo );

            // call the callback and populate the Title field with the file name

            cb(reader.result, { title: 'hola' });
        };
        reader.readAsDataURL( file );
    };

    input.click();
}

但是它不起作用，而是将源转换为 blob，例如

<img src="blob:null/c8e90adb-4074-45b8-89f4-3f28c66591bb" alt="" /> 

如果我传递一个普通的字符串，例如test.jpg，会生成

<img src="test.jpg" alt="" />

Answer 1

您看到的blob: 格式实际上是Base64 编码的二进制图像。如果你将 TinyMCE 的内容发布到服务器，你确实会得到 Base64 数据。

您可以按照以下步骤强制 TinyMCE 立即将该图像发送到您的服务器以转换为“常规”图像：

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

Answer 2

在tinymce\plugins\quickbars\plugin.js中如图所示位置添加以下代码

$.ajax({
            url: 'saveupload', // Upload Script
            enctype : 'multipart/form-data',
            type: 'post',
            data: {"imageString":base64,"imageType":blob.type,"imageName": blob.name},
            success: function(responseText) {
                var myJSON = JSON.parse(responseText);
                editor.insertContent(editor.dom.createHTML('img', { src: myJSON }));
            },
            error : function(xhr, ajaxOptions, thrownError) {
            }
          });

注意：如果您使用缩小版，请使用任何缩小版工具（例如：yuicompressor）将其转换为缩小版 我正在将图像上传到 apache

servlet 代码如下

public void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, java.io.IOException {
    tbaService = new TBAServiceImpl();
    File f = new File("path");
    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
    Map<String, String[]> parameterNames = request.getParameterMap();
    Gson gson = new Gson();
    HttpSession session = request.getSession(true);

    long timeinMill = new Date().getTime();
    String uniqueFileName = "local_"+timeinMill+"_"+parameterNames.get("imageName")[0].replace(" ", "_");
    String fileType = parameterNames.get("imageType")[0].split("/")[1];
    try {

        BufferedImage image = null;
        byte[] imageByte;

        BASE64Decoder decoder = new BASE64Decoder();
        imageByte = decoder.decodeBuffer(parameterNames.get("imageString")[0]);
        ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);
        image = ImageIO.read(bis);
        bis.close();

        // write the image to a file
        File outputfile = new File(filePath+uniqueFileName); //filePath = C:/Apache/htdocs/tba/images/
        ImageIO.write(image, fileType, outputfile);

        out.print(gson.toJson(uploadUrl+uniqueFileName)); //uploadUrl=http://localhost/test/images/
        out.flush();
        out.close();

    } catch (Exception ex) {
        ex.printStackTrace();
    }
}