如何使用 php echo 变量将大字符串 html 解析为 Javascript

Question

我有一个 javascript 函数，可以将存储在 mysql 数据库中的 html 代码显示到 CKeditor <textarea> 中。当用户选择任何选项时，mysql 查询旨在将 html 代码块作为 php 变量回显到 javascript 中。

选择选项在从 javascript 中选择回显变量时非常有效。这里的问题是，当我将纯文本保存到数据库中时，它们会显示出来，但是当我将 html 代码保存到数据库中时，javascript 拒绝显示它。

我尝试了几种方法将 html 字符串回显到 javascript 中，例如：

 <?php echo json_encode($fbilling); ?> \\Accepts Only Plain Texts Not HTML Codes
'<?php echo decodeURI(rawurlencode($freply)); ?>' \\Refuses To load Page
'<?php echo htmlspecialchars_decode(rawurlencode($freply)); ?>'  \\Changes HTML Codes To Characters Like :%3Ctable%20data-module%3D%22header%22%20data
'<?php htmlspecialchars(json_encode($freply)); ?>'  \\ No Value is Displays, Just Empty
'<?php echo htmlspecialchars(json_encode($freply)); ?>' \\ No Value is Displays, Just Empty
'<?php echo htmlspecialchars(rawurlencode($freply)); ?>' \\Changes HTML Codes To Characters Like :%3Ctable%20data-module%3D%22header%22%20data

这是我的代码：

var Code = new Array("", <?php echo json_encode($fwelcome); ?>, <?php echo json_encode($fbilling); ?>, <?php echo json_encode($freply); ?>, <?php echo json_encode($fdelivery); ?>);

function change() {
  var ID = formconteudo.message.options[formconteudo.message.selectedIndex].value;
  CKEDITOR.instances.editor1.setData('<p>' + Code[ID] + '</p>');
}

<div class="col-md-4">
  <div class="form-group">
    <?php             
                        $sql3="SELECT * FROM email WHERE id='1'";
                        $result3=mysql_query($sql3) or die(mysql_error());
                        $rwsf=  mysql_fetch_array($result3);
                        $fwelcome= $rwsf[3]; 
                        $freply= $rwsf[2]; 
                        $fbilling= $rwsf[1]; 
                        $fdelivery= $rwsf[4]; 
                        ?>
    <label>Email Templates: </label>
    <select name="message" onChange="change();" class="form-control select2 required" style="width: 100%;">
      <option disabled selected>Click To Select</option>
      <option value="1">Welcome Email</option>
      <option value="2">Billing Email</option>
      <option value="3">Basic Reply Email</option>
      <option value="4">Delivery Process Email</option>
    </select>
  </div>
</div>
</div>


<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <input type="text" name="subject" placeholder="Subject" class="form-control required">
    </div>
  </div>
</div>
<textarea id="editor1" name="editor1" rows="10" cols="80">Select your mail design from the 'Email' drop down list above.</textarea><br>

<div class="form-wizard-buttons">
  <button type="submit" class="btn btn-success" style="border:0px"><i class="fa  fa-send"> Send Mail</i></button>
</div>

Answer 1

您好，您有 html 内容，您可以按照以下流程获取 html 并将其作为参数发送给函数。

    <div class="col-md-4">
      <div class="form-group">
        <?php             
                            $sql3="SELECT * FROM email WHERE id='1'";
                            $result3=mysql_query($sql3) or die(mysql_error());
                            $rwsf=  mysql_fetch_array($result3);
                            $fwelcome= $rwsf[3]; 
                            $freply= $rwsf[2]; 
                            $fbilling= $rwsf[1]; 
                            $fdelivery= $rwsf[4]; 
                            ?>
        <label>Email Templates: </label>
        <select name="message" onChange="change();" class="form-control select2 required" style="width: 100%;">
          <option disabled selected>Click To Select</option>
          <option value="1">Welcome Email</option>
          <option value="2">Billing Email</option>
          <option value="3">Basic Reply Email</option>
          <option value="4">Delivery Process Email</option>
        </select>
      </div>
    </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <input type="text" name="subject" placeholder="Subject" class="form-control required">
        </div>
      </div>
    </div>
    <textarea id="editor1" name="editor1" rows="10" cols="80">Select your mail design from the 'Email' drop down list above.</textarea><br>

    <div class="form-wizard-buttons">
      <button type="submit" class="btn btn-success" style="border:0px"><i class="fa  fa-send"> Send Mail</i></button>
    </div>
   <div name="fwelcome_content">
     <?php echo $fwelcome; ?>
   </div>
   <div name="fbilling_content">
     <?php echo $fbilling; ?>
   </div>
   <div name="freply_content">
     <?php echo $freply; ?>
   </div>    
   <div name="fdelivery_content">
     <?php echo $fdelivery; ?>
   </div>

然后在javascript中

var Code = new Array();
window.onload = function(e){     
   Code = new Array("", getHTMLContent("fwelcome_content"), getHTMLContent("fbilling_content"), getHTMLContent("freply_content"), getHTMLContent("fdelivery_content"));
}
function change() {
  var ID = formconteudo.message.options[formconteudo.message.selectedIndex].value;
  CKEDITOR.instances.editor1.setData('<p>' + Code[ID] + '</p>');
}
function getHTMLContent(elementId){
  var htmlContent = document.getElementsByName(elementId)[0].innerHTML;
  document.getElementsByName(elementId)[0].remove();
  return htmlContent;
}