Question

我在CKEDITOR的帮助下撰写了一个电子邮件正文。我想在base64格式的消息体中添加一个图像。这样我就可以沿身体发送编码图像，而无需在服务器上存储图像。

我知道可以在TinyMCE中实现而无需在服务器上发送。我们怎样才能在CKEDITOR中实现这一目标？

到目前为止，我已尝试过

CKEDITOR.replace('editor1', {
   //filebrowserBrowseUrl:'xx',
   filebrowserUploadUrl: 'base64'
});
CKEDITOR.config.extraPlugins = "base64image";

我还有一个方法可以将url转换为base64，如

function getBase64FromImageUrl(url) {
     var img = new Image();

     img.setAttribute('crossOrigin', 'anonymous');

 img.onload = function () {
       var canvas = document.createElement("canvas");
       canvas.width = this.width;
       canvas.height = this.height;

       var ctx = canvas.getContext("2d");
       ctx.drawImage(this, 0, 0);

       var dataURL  = canvas.toDataURL("image/png");

       alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    };

  img.src = url;
}

Answer 1

您不必使用画布。看看insertHtml。我在自定义插件中使用此功能：

function getBase64(fileData, editor)
{
    var reader = new FileReader();
    reader.addEventListener("load", function (e) {
        var result = e.target.result;

        if (editor)
        {
            editor.insertHtml('<img src="' + result + '">');
        }
    });

    reader.readAsDataURL(fileData);
}

编辑：OP：＆＃34; CKEditor如何将值传递给此函数？＆＃34; 在我的例子中，它是一个简单的插件，它是getBase64函数的一个常量，一个用于获取/选择图像路径及其逻辑的模态（相似）对话框。在这个小对话框中输入：

<input type="file" id="fileLoader" name="files" title="Load File" />

在对话框逻辑中，我使用以下代码获取文件：

var imagePath = null;
var fileLoader = $(this).find('#fileLoader');
if (fileLoader)
{
    var fileData = null;
    imagePath = fileLoader.val();

    if (fileLoader.files && fileLoader.files[0]) {

        fileData = fileLoader.files[0];
        }
        if (fileData == null) {
            if (fileLoader.length && fileLoader.length > 0) {
                fileLoader = fileLoader[0];
                if (fileLoader.files && fileLoader.files[0]) {

                    fileData = fileLoader.files[0];
                    }
                }
            }

您可以将此文件数据传递给getBase64函数。您也可以查看这个简单的插件tutorial。

在客户端上传图像并将其转换为base64以生成html

1 个答案: