html - 在 TinyMCE 中设置数据 URI

Question

TinyMCE 初始化选项

$scope.tinymceOptions = {
    plugins: 'base64img image imagetools paste ...',
    relative_urls: false,
    paste_data_images: true,
    ...
};

paste_data_images: true 选项意味着 data:url 图像(内联图像)不应从粘贴的内容中删除(参见 docs )。
我使用 TinyMCE 4.2.8。在 base64img 插件中，我编写了以下代码

var editor; // TinyMCE editor
var imgData; // base64 image data string, like "data:image/png;base64,...="
editor.setContent("<img src='" + imgData + "' />", {format: 'raw'});

// editor.execCommand('mceInsertRawHtml', false, '<img src=\'' + imgData + '\' />');  // another way

到embed an image它作为 base64 字符串加载到内存中。命令执行后，img src 被神奇地转换为'blob:http%3A//localhost%3A8080/...'。 为什么？

它有效(显示图像)，但我想将图像存储为 data: 而不是将它们上传到服务器并存储为 blob。 如何改变这种行为？

Answer 1

图像在内部保存为 'data:image/png;base64,...='，因此您无需担心。不执行上传，'blob:http%3A//localhost%3A8080/...' 仅用于显示图像信息。