缺乏可编辑的html电子邮件的概念

时间:2013-11-06 15:04:04

标签: javascript php

我在php创建的html页面上有一个按钮,单击一个javascript函数将特定元素值发布到另一个php页面,执行mysql查询,创建一个html电子邮件并自动发送它而无需用户交互。效果很好。

现在已经请求了一个额外的步骤,即能够在发送电子邮件之前查看该电子邮件,并且可能会对其进行编辑,而我缺乏如何操作的概念。最好不要破坏我已有的代码。

也许就像消息框....你想要审查电子邮件(是/否)没有继续发送电子邮件,是的允许它被编辑。

任何想法或输入都会很棒。

添加当前代码:

page1.php中

echo "<td>";
if ($x == "Y"){$sent1 = "Y"; $checkcolor1 = 'images/greencheck.jpg';} else {$sent1 = "N"; $checkcolor1 = 'images/redcheck.jpg';}
echo "<div id='stepA$a' title='$sent1$a' value='$mycode'><a id='$a' href='' class ='step1'><div id='stepB$a'><img src='$checkcolor1' title='Send Rental Agreement' border='0' height='24' width='24'></img></div></a></div>";
echo "</td>";

Javascript功能

    $(".step1").on("click", function () {
    var element = $(this);
    var I = element.attr("id");
    var id = $("#id" + I).val();
    var checkname1 =  $("#stepA" + I).attr("title");
    var code =  $("#stepA" + I).attr("value");
    $.post("page2.php", {
        id: id, checkname1: checkname1, code: code          
    },
    function (data) {
        var response = (data).split(";", 2);
        $("#stepA" + I).attr("title", (response[0]));   
        $("#stepB" + I).html(response[1]);
        $("#stepB" + I).hide();
        $("#stepB" + I).fadeIn(1500);
    });
    return false;
});

使page2.php

<?php
include('connection.php');

$mycode = $_POST['code']; 

if (empty($mycode)) {die("No Value");}

$result = mysql_query("SELECT code FROM code WHERE code = '$mycode'") or die ( mysql_error ());

if (mysql_num_rows($result) > 0) {

$id=$_POST['id'];
$checkname1=$_POST['checkname1'];
$rest = $checkname1 [0];

if ($rest == "Y"){

    $checkchange1 ="Y$id";
    $checkchange2 ="<img src='images/greencheck.jpg' title='Send Rental Agreement' border='0' height='24' width='24'></img>";
    echo $checkchange1.";".$checkchange2.";";   

} else {    

    $change="Y";
    $query = "UPDATE info SET invoice = '$change' WHERE id = $id";
    $result = mysql_query($query) or die ( mysql_error ());

$query = "SELECT * FROM info WHERE id = '$id'";
$result = mysql_query($query) or die ( mysql_error ());


if (mysql_num_rows($result) > 0) {      

while(list($a,$b,$c,$d,$e) = mysql_fetch_row($result)) { 

$mail_body ='
<img src="images/logo.png" alt="Logo" width="174" height="70"></img><br />
<p><b>HTML Email body</b></p>';}

            $to = $e;                       

            $headers = 'MIME-Version: 1.0' . "\r\n" .
                       'Content-Type: text/html; charset=ISO-8859-1' . "\r\n" .
                       'From: Rental<hell@test.com>' . "\r\n" .
                       'Reply-To: hello@test.com' . "\r\n" .
                       'X-Mailer: PHP/' . phpversion();         
            $subject = 'Rental Agreement ' . $d . ', ' . $l . ' - ' . $m;

            mail($to, $subject, $mail_body, $headers);  


    $checkchange1 ="Y$id";
    $checkchange2 ="<img src='images/greencheck.jpg' title='Send Rental Agreement' border='0' height='24' width='24'></img>";
    echo $checkchange1.";".$checkchange2.";";           
}
}
}
}   
?>

更新: 我按照建议下载了TinyMCE并进行了以下更改。我还有3个问题。

1 - TinyMCE没有显示任何图像所以我需要调查一下。 2 - 虽然它允许我编辑它....没有对电子邮件或源的编辑实际上是按钮点击提交的。 3 - 电子邮件底部显示的html代码显示我无法查看或找到...所以仍在调查。

我已将我的javascript更改为以下内容 -

    $(".step5").on("click", function () {
    var element = $(this);
    var I = element.attr("id");
    var code =  $("#stepI" + I).attr("value");
    var checkname =  $("#stepI" + I).attr("title");
    $("#email").html("<h3>Loading</h3>").css("display", "block");
    $.get("emailtest1.php?code=" + code + "&id=" + I + "&checkname=" + checkname , function (data) {
        $("#email").html(data);
        $("#snd").click(function () {
            var send_to = document.getElementById("addy").value;                
            var email_body = document.getElementById("content").value;
            $("#email").append("<br /><br /><div><i>Sending...</i></div>");
            $.post("emailtest1.php?code=" + code, {
                mode: "snd", send_to: send_to, email_body: email_body          
            }, function (data) {
            var response = (data).split("z",3);         
            $("#email").html(response[0]);
            $("#stepI" + I).attr("title", (response[1]));   
            $("#stepJ" + I).html(response[2]);
            $("#stepJ" + I).hide();
            $("#stepJ" + I).fadeIn(1500);
                });                                 
        });
        $("#cnx").click(function () {
            $.post("emailtest1.php?code=" + code, {
                mode: "cnx"
            }, function (data) {
                $("#email").html(data);

            });
        });
    });
});

我将page1.php更改为以下

echo "<td>";
if ($x == "Y"){$sent1 = "Y"; $checkcolor1 = 'images/greencheck.jpg';} else {$sent1 = "N"; $checkcolor1 = 'images/redcheck.jpg';}
echo "<div id='stepI$a' title='$sent1$a' value='$mycode'><a id='$a' href='#' class ='step5'><div id='stepJ$a'><img src='$checkcolor1' title='Email Test' border='0' height='24' width='24'></img></div></a></div>";
echo "<div id='email'></div>";

我将page2.php更改为以下

function showForm(){
$id = $_GET['id'];
$checkname =$_GET['checkname'];
$rest = $checkname [0];


$mail_body =' the body of my email';}


echo '<script type="text/javascript">

tinymce.init({
selector: "textarea",
auto_focus: "elm1",
width: 1100,
height: 2500,
plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

</script>
<h3>Email To Send</h3>
<form name="mf" id="mf" method="post" action="">
<p><label>Address :</label><input type="text" size="35" name="addy" id="addy" value="'.$e.'"/></p>
<textarea name="content" id="content" style="width:100%" value="\''.$clean_mail_body.'\'"></textarea>
<p><a href="#" class="btn" id="snd" name="snd"><img src="images/submitbutton.jpg" title="Send Email" border="0" height="25" width="75"></img></a><a href="#" class="btn" id="cnx" name="cnx">   <img src="images/cancelemail.jpg" title="Send Email" border="0" height="25" width="80"></img></a></p>
</form>';
}
}
}

function cnxForm(){
            echo '<a href=""><img src="/images/logo.png"></a><br/><h3>Email Not Sent</h3><script type="text/javascript">setTimeout(\'$("#email").fadeOut("fast")\',2000);</script>';
}

function sndForm(){

            $send_to = $_POST['send_to'];
            $email_body = $_POST['email_body'];

            $headers = 'MIME-Version: 1.0' . "\r\n" .
                       'Content-Type: text/html; charset=ISO-8859-1' . "\r\n" .
                       'From: Rental<test@test.com>' . "\r\n" .
                       'Reply-To: test@test.com' . "\r\n" .
                       'X-Mailer: PHP/' . phpversion();         
            $subject = 'Rental Agreement';

            mail($send_to, $subject, $email_body, $headers);                

            $checkchange0 ='<a href=""><img src="/images/logo.png"></a><br/><h3>Email Sent</h3><script type="text/javascript">setTimeout(\'$("#email").fadeOut("fast")\',2000);</script>';
            $checkchange1 ="Y$id";
            $checkchange2 ="<img src='images/greencheck.jpg' title='Send Rental Agreement' border='0' height='24' width='24'></img>";
            echo $checkchange0."z".$checkchange1."z".$checkchange2."z";

}


$mode=(!empty($_GET['mode']))?$_GET['mode']:$_POST['mode'];
switch($mode){
case 'snd': sndForm();break;
case 'cnx': cnxForm();break;
default: showForm();break;
}
}

1 个答案:

答案 0 :(得分:1)

首先要做的两件事:

  • 您显然必须在某处更改现有代码;
  • 你的问题非常笼统,所以我的答案也是如此。

您已拥有大部分代码,因此不会发生重大变化(我认为,我无法看到您的代码)。

我该怎么做:

  1. 将值发布到PHP脚本;
  2. 生成电子邮件(到目前为止你很好);
  3. 然后,不是发送此电子邮件(您必须在那里更改您的代码),而是将其显示在用户的页面上(电子邮件通常是HTML,因此不应该太难)富文本编辑器,以便用户可以编辑它。选择:http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/
  4. 在该页面上使用编辑器,显示另一个按钮并将编辑过的电子邮件发送到PHP脚本,该脚本包含发送电子邮件的代码(您已经拥有)。
  5. 在这篇富文本编辑器上:我简要介绍了TinyMCE。它会将正常<textarea>转换为编辑器,因此您只需将其放入<form action="[yourScript].php" action="POST">并将编辑后的电子邮件提交给服务器<input type="submit">

    感谢Polywhirl先生:TinyMCE不再维护,CKEditor似乎是一个不错的选择。这似乎是错误的。 TinyMCE在4周前发布了。

    修改
    我刚刚在您自己的问题上阅读了您的评论,建议您使用AJAX请求将表单数据发布到您的脚本中。在那种情况下:

    1. 将您的PHP代码拆分为两个脚本:一个生成电子邮件,另一个发送
    2. 将数据发布到邮件生成器。生成器将回发邮件作为对AJAX调用的响应。
    3. 然后,您有邮件客户端,向用户显示RTE(例如使用来自this thread的内容)
    4. 并在用户提交电子邮件时发出另一个AJAX调用,将邮件发送到发送邮件的脚本。 (注意人们不要用它来发送垃圾邮件。)