使用所见即所得的文本编辑器创建电子邮件

时间:2019-08-27 14:27:04

标签: php jquery tinymce phpmailer

我已经在我的网站上创建了一个管理员部分,该部分内容将用于向订阅的人发送新闻通讯。将要执行此操作的人没有编码经验,这就是为什么不能仅使用php / html来创建电子邮件的原因。

我试图做的是使用所见即所得的文本编辑器,使他们更容易做到这一点。我为此使用了tinymce。但是,在添加图像时遇到问题,如果图像已上传,它们将不会显示在Outlook或gmail中。这不是很好,因为这意味着上传图像的唯一方法是仅从网站复制图像地址并以这种方式添加它们。另一个问题是,尽管您可以在编辑器上调整图像的大小,但是一旦发送了电子邮件,原始图像的大小就是所发送的大小。我已经尝试通过执行以下操作来使它正常工作:

x <- rle(diff(V1))

#To get the length of longest sequence we can do
max(x$lengths) + 1
#[1] 14

#To get the end index of longest sequence
sum(x$lengths[seq_len(which.max(x$lengths))]) + 1
#[1] 17

用于发送电子邮件的页面如下:

<script>
$(document).ready(function() {
  tinymce.init({
    selector: "textarea",
      convert_urls: false,
    relative_urls: false,
    remove_script_host: false,
    fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
    theme: "modern",
    paste_data_images: false,
    plugins: [
      "advlist autolink 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"
    ],
    toolbar1: "sizeselect | fontselect |  fontsizeselect |insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | editimage | imageoptions",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    file_picker_callback: function(callback, value, meta) {
      if (meta.filetype == 'image') {
        $('#upload').trigger('click');
        $('#upload').on('change', function() {
          var file = this.files[0];
          var reader = new FileReader();
          reader.onload = function(e) {
            callback(e.target.result, {
              alt: ''
            });
          };
          reader.readAsDataURL(file);
        });
      }
    },
    templates: [{
      title: 'Test template 1',
      content: 'Test 1'
    }, {
      title: 'Test template 2',
      content: 'Test 2'
    }]
  });
});
  </script> 



  <style>
  .hidden{display:none;}
  </style>




</head>
<body>

<div id="wrapper">

    <?php include('menu.php');?>
    <p><a href="./">JG Ross Admin Index</a></p>

    <h2>Send Email</h2>
    <p>(Both subject and content must be filled out in order to send the email)</p>

    <?php

    //if form has been submitted process it
    if(isset($_POST['submit'])){

        $_POST = array_map( 'stripslashes', $_POST );

        //collect form data
        extract($_POST);

        //very basic validation
        if($subject ==''){
            $error[] = 'Please enter the title.';
        }


        if($emailCont ==''){
            $error[] = 'Please enter the content.';
        }

        if(!isset($error)){



        }

    }

    //check for any errors
    if(isset($error)){
        foreach($error as $error){
            echo '<p class="error">'.$error.'</p>';
        }
    }
    ?>

    <form action='createEmail.php' method='post'>

        <div id="toolbar-container"></div>

        <p><label>Subject</label><br />
        <input type='text' name='subject' required value='<?php if(isset($error)){ echo $_POST['subject'];}?>'></p>

        <p><label>Content</label><br />
        <textarea name='emailCont' id="emailCont" cols='60' rows='10'><?php if(isset($error)){ echo $_POST['emailCont'];}?></textarea></p>
         <input name="image" type="file" id="upload" class="hidden" onchange="">

        <p><input type='submit' name='submit' value='Submit'></p>

    </form>

</div>


    </body>


    </html>

当我查看更新后的图像源时,它类似于:

blob:http://localhost/d27a27cd-32a3-443e-ad7c-f3bf745fa500

这可能是个问题吗?

是否有一种方法可以使此工作正常进行,从而使图像通过并以我调整尺寸的大小?还是我在浪费时间尝试这样做?如果是这样,将新闻通讯发送给订户的更好方法是什么?

1 个答案:

答案 0 :(得分:0)

万一其他人遇到此问题并且不像我以前那样知道,可以将一个外部插件添加到tinymce中,称为Responsive filemanager,可以在此处找到:https://www.responsivefilemanager.com/。添加后,您将能够存储图像并可以通过电子邮件发送图像,而不会出现任何问题。

注意:如果图像是通过本地主机完成的,则图像不会显示在电子邮件中,需要通过适当的网站来完成,例如我正在使用000webhost。

它也不能在最新版本的tinymce上运行(据我所知),尝试了一下却没有效果。因此,我正在使用4.3.3版,它可以正常工作。

希望这可以帮助某人