甜蜜警报以文本形式显示HTML代码

SweetAlert回购似乎未维护。有一堆没有任何回复的拉取请求，上一次合并的拉取申请是在2014年11月9日。

我创建了SweetAlert2，它在模式中支持HTML，并提供了其他一些自定义模式窗口宽度、填充、Esc按钮行为等选项。

Swal.fire({
  title: "<i>Title</i>", 
  html: "Testno  sporocilo za objekt: <b>test</b>",  
  confirmButtonText: "V <u>redu</u>", 
});

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

最近在GitHub上的master分支中添加了一个允许标题和文本参数使用HTML的功能https://github.com/t4t5/sweetalert/commit/9c3bcc5cb75e598d6faaa37353ecd84937770f3d

只需使用JSON配置并将"html"设置为true，例如：

swal({ html:true, title:'<i>TITLE</i>', text:'<b>TEXT</b>'});

这是在不到一周前合并的，并在README.md中暗示（尽管没有明确描述，但在其中一个示例中html设置为false），但它尚未在营销页面上记录http://tristanedwards.me/sweetalert

我从旧的sweetalert升级，并在新版本（官方文档）中找到了如何做到这一点：

// this is a Node object    
var span = document.createElement("span");
span.innerHTML = "Testno  sporocilo za objekt <b>test</b>";
swal({
    title: "" + txt + "", 
    content: span,
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});

Sweet alerts还有一个"html"选项，将其设置为true。

var hh = "<b>test</b>";
swal({
    title: "" + txt + "", 
    html: true,
    text: "Testno  sporocilo za objekt " + hh + "",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});

截至2018年，接受的答案已过期：

Sweetalert得到了维护，您可以使用内容选项来解决原始问题。

我只是在挣扎。我从sweetalert1->2升级。此库：https://sweetalert.js.org/guides/

文档"string"中的示例没有像我预期的那样工作。你不能这样说。

content: `my es6 string <strong>template</strong>` 

我是如何解决的：

const template = (`my es6 string <strong'>${variable}</strong>`);
content: {
      element: 'p',
      attributes: {
        innerHTML: `${template}`,
      },
    }

目前还没有关于如何做到这一点的文档，这只是一次尝试和错误，但至少看起来是有效的。

使用SweetAlert的html设置。

您可以将输出html直接设置为此选项：

var hh = "<b>test</b>";
swal({
    title: "" + txt + "", 
    html: "Testno  sporocilo za objekt " + hh + "",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});

或

swal({
    title: "" + txt + "", 
    html: "Testno  sporocilo za objekt <b>teste</b>",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});

有甜蜜的Alert版本1和2。实际版本2适用于HTML节点。

我有一个Sweet Alert 2，它的数据表单看起来是这样的：

<script>
 var form = document.createElement("div");
      form.innerHTML = `
      <span id="tfHours">0</span> hours<br>
      <input style="width:90%;" type="range" name="tfHours" value=0 step=1 min=0 max=25
      onchange="window.changeHours(this.value)"
      oninput="window.changeHours(this.value)"
      ><br>
      <span id="tfMinutes">0</span> min<br>
      <input style="width:60%;" type="range" name="tfMinutes" value=0 step=5 min=0 max=60
      onchange="window.changeMinutes(this.value)"
      oninput="window.changeMinutes(this.value)"
      >`;
      swal({
        title: 'Request time to XXX',
        text: 'Select time to send / request',
        content: form,
        buttons: {
          cancel: "Cancel",
          catch: {
            text: "Create",
            value: 5,
          },
        }
      }).then((value) => {
        console.log(value);
      });
 window.changeHours = function (value){
   var tfHours = document.getElementById("tfHours");
   tfHours.innerHTML = value;
 }
 window.changeMinutes = function (value){
   var tfMinutes = document.getElementById("tfMinutes");
   tfMinutes.innerHTML = value;
 }

试试Codepen示例！

我知道我的答案可能来得太晚了，但我找到了一个适合我的解决方案。

1. 创建一个保存在html内容中的对象

var html_element = '<p><code>This</code> is an error</p>';

2. 然后继续创建你的甜蜜警报元素

swal({
    title: "My Title", 
    text: "",  
    html: true,  
    confirmButtonText: "Okay" 
});

3. 使用javascriptsetTimeout函数将您的html附加到甜蜜警报中。我发现将超时设置为210效果良好

   setTimeout(function(){
        $('.sweet-alert p:eq(0)').html(html_element)
   },210);
   

你做到了！

您所要做的就是将html变量启用为true。。我遇到了同样的问题，我所要做的就是html:true，

    var hh = "<b>test</b>"; 
swal({
        title: "" + txt + "", 
        text: "Testno  sporocilo za objekt " + hh + "",  
        html: true,  
        confirmButtonText: "V redu", 
        allowOutsideClick: "true"  
});

注意：html : "Testno sporocilo za objekt " + hh + "",
可能无法工作，因为html密码仅用于通过在Sweetalert中分配true/false值来激活此功能
此html : "Testno sporocilo za objekt " + hh + "",用于SweetAlert2

您可以在隐藏的div中使用已编译的元素，并通过id获取div，然后像这样放置：

  var wrapper = document.getElementById('yourdiv');
    swal({
      icon: "sucess",
      text: "Your Content",
      content: wrapper
    })

我假设</在字符串中不被接受。

尝试在前斜杠"/"前面加一个后斜杠"''"来转义，例如：

var hh = "<b>test<'/b>";