我在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;
}
答案 0 :(得分: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。