甜蜜警示显示文本中的HTML代码

Question

我正在使用sweet-alert插件来显示警报.使用经典配置(默认值),一切正常.但是当我想在TEXT中添加HTML标签时,它会显示<b>...</b>而不会使其变为粗体.在搜索答案后,看起来我没有正确的搜索词......

如何使用HTML代码制作甜蜜警报显示文本？

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

Answer 1

SweetAlert回购似乎没有得到维护.有一堆Pull Requests没有任何回复,最后一次合并的拉取请求是在2014年11月9日.

我在模态中创建了支持HTML的SweetAlert2以及用于自定义模态窗口的一些其他选项 - 宽度,填充,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@8"></script>

Answer 2

添加了标题和文本参数HTML的功能,最近合并到GitHub上的主分支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

Answer 3

我正在从旧的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" 
});

Answer 4

我只是为此而挣扎。我从sweetalert 1 -> 2 升级。这个库：https ://sweetalert.js.org/guides/

文档“字符串”中的示例无法按我的预期工作。你不能这样说。

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

我是如何解决的：

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

没有如何做到这一点的文档，这纯粹是反复试验，但至少似乎有效。

Answer 5

截至2018年,接受的答案已过时:

维护Sweetalert,您可以使用内容选项解决原始问题的问题.

Answer 6

甜蜜警报还具有“ html”选项，将其设置为true。

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