使用tinymce将图像添加到html电子邮件中

我正在尝试将图像添加到用于创建html电子邮件的tinymce文本区域。所有正在努力的程度，但我有几个疑问的：使用tinymce将图像添加到html电子邮件中

当图像被选择时得到“斑点”出现在源，我不是很了解的开头：

如果我继续，然后我看到src标签丢失完整路径，只保留文件夹和文件名。这意味着电子邮件的收件人无法查看图像。

我稍微改编自 'TinyMCE的'，但不知道是什么改变来解决这两个错误的例子：

tinymce.init({ 
    selector: '#email_text_area', 
    plugins: [ 
     "advlist lists link image charmap print preview hr anchor pagebreak", 
     "searchreplace wordcount visualblocks visualchars code fullscreen", 
     "insertdatetime media nonbreaking save table contextmenu directionality", 
     "emoticons template paste textcolor colorpicker textpattern" ], 
    image_title: true, 
    automatic_uploads: true, 
    images_upload_url: 'image_acceptor.php', 
    file_picker_types: 'image', 
    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 = (new Date()).getTime(); 
      var blobCache = tinymce.activeEditor.editorUpload.blobCache; 
      var blobInfo = blobCache.create(id, file); 
      blobCache.add(blobInfo); 
      cb(blobInfo.blobUri(), { title: file.name }); 
     }; 
     input.click(); 
    } 
});

UPDATE：

看来，该image_acceptor。 php需要更改为：

$filetowrite = "/home/..server-side public folder../email_images/" . $filename;

图像写入服务器上正确的文件夹，然后更改$ filetowrite的JSON响应到图像的实际URL：

$filetowrite = "https://.. url ../email_images/" . $filename;

这并没有在源对话解决“斑点”，但没解决图片在html源代码中的问题。

来源

2017-03-01 RGriffiths

Blob代表** Binary Large OBject **。它的东西像原始图像文件，你不会理解和使用它。 – NDFA

关于电子邮件中图像的最佳做法是*您最好避免将图像附加到电子邮件本身，而是将图像保存在可公开访问的网页某处（例如您的主机），并将其地址放在''src'属性中' '住在电子邮件中。* – NDFA

@BehradKhodayar谢谢，但那正是我所做的。图像被上传到服务器，并且标签应该被插入到指向图像的html中。问题是完整的路径会丢失，如问题中的图像所示。这意味着电子邮件已发送，图像显示为来自email_images/image.png而不是https：//host/.../email_images/image.png – RGriffiths

也许你会需要配置URL Handling：

尝试添加这些行：

tinymce.init({ 
    convert_urls: false, 
    relative_urls: false, 
    remove_script_host: false 
});

默认都是true。

来源

2017-03-01 02:00:36

当您将图像上传到BLOB服务器的工作是由您的设置为images_upload_url

images_upload_url: 'image_acceptor.php'

什么是你是从PHP脚本返回准确的JSON处理？如果您在插入图像后查看代码视图，那么该位置设置的src是什么？保存内容后它有所不同吗？

来源

2017-03-01 22:44:14

你完全正确。 json响应只是文件夹/文件，我更改了image_acceptor.php文件以将其排除。所以现在所有人都在工作，但是当我第一次选择图像文件时，我仍然得到'blob：https .....'，并且有一个奇怪的文件名作为源文件。一旦我点击确定，然后回去编辑它，路径中就存在正确的文件路径，最重要的是它在html源代码中也是正确的。我想我可能只是不得不忍受最初的来源不正确观看，但我不喜欢它。查看更新了解我的工作。 – RGriffiths

“当我第一次选择图像文件时，我仍然得到'blob：https .....'，并且有一个奇怪的文件名作为源文件。” - 这就是浏览器如何访问您在硬盘上本地选择的图像。 –

使用tinymce将图像添加到html电子邮件中

回答

相关问题