使用 tinymce 将图像包含到 html 电子邮件中 [英] Including image into html email using tinymce

问题描述

我正在尝试将图像添加到用于创建 html 电子邮件的 tinymce 文本区域.一切都在一定程度上起作用，但我有几个疑问:

I am trying to add an image to a tinymce text area which is used to create an html email. All is working to an extent but I have a couple of queries:

选择图像后，源代码开头出现blob"，我不太明白:

When the image is selected I get 'blob' appearing at the beginning of the source, which I can't quite understand:

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

And if I continue then I see that the src tag loses the full path and remains as just the folder and filename only. This means that the recipients of the email can't view the image.

我稍微修改了tinymce"中的示例，但不确定要更改什么来修复这两个错误:

I have slightly adapted the example from 'tinymce' but not sure what to change to fix these two errors:

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();
    }
});

更新:

好像需要把image_acceptor.php改成:

It seemed that the image_acceptor.php needed to be changed to:

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

将图像写入服务器上的正确文件夹，然后将 json 响应的 $filetowrite 更改为图像的实际 URL:

to write the image to the correct folder on the server and then change $filetowrite for the json response to the actual URL of the image:

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

这并没有修复源对话框中的blob"，但确实修复了 html 源中的图像问题.

This did not fix the 'blob' in the source dialog but did fix the image in the html source problem.

推荐答案

当您插入图像时，将 BLOB 上传到服务器的工作由您对 images_upload_url

When you insert the image the job of uploading the BLOB to the server is handled by your setting for images_upload_url

images_upload_url: 'image_acceptor.php'

您从该 PHP 脚本返回的确切 JSON 是什么?如果在插入图像后查看代码视图，此时 src 设置为什么?保存内容后有什么不同吗?

What is the exact JSON that you are returning from that PHP script? If you look in code view after you insert the image what is the src set to at that point? Is it different after you save the content?

这篇关于使用 tinymce 将图像包含到 html 电子邮件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！