sweet-alert отображение HTML-кода в тексте

Я использую плагин sweet-alert Для отображения предупреждения. С классической конфигурацией (по умолчанию) все идет хорошо. Но когда я хочу добавить HTML-тег в текст, он отображает <b>...</b> не делая его жирным. После поиска ответа, Похоже, у меня нет правильного слова поиска...

Как заставить sweet alert отображать текст также с HTML-кодом?

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

7 ответов

РЕПО SweetAlert, похоже, не поддерживается. Есть куча запросов Pull без каких-либо ответов, последний объединенный запрос pull был 9 ноября 2014 года.

Я создал SweetAlert2 С поддержкой HTML в модальном и некоторых других опций для настройки модальной ширины окна, заполнения, поведения кнопки Esc и т. д.

swal({
  title: "<i>Title</i>", 
  html: "Testno  sporocilo za objekt: <b>test</b>",  
  confirmButtonText: "V <u>redu</u>", 
});
<script src="https://unpkg.com/sweetalert2@7.17.0/dist/sweetalert2.all.js"></script>
130

функция, позволяющая 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

48

Я обновлялся со старого sweetalert и узнал, как это сделать в новой версии (officail Docs):

// 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" 
});
14

по состоянию на 2018 год принятый ответ устарел:

Sweetalert поддерживается, и вы можете решить проблему исходного вопроса с использованием контент.

5

Я просто боролся с этим. Я обновился от sweetalert 1 - > 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}`,
      },
    }

нет документации как это сделать, это был чистый метод проб и ошибок, но по крайней мере, кажется, работает.

0

Я просто применил патч, и он начинает работать.

diff --git a/sweet-alert.js b/sweet-alert.js
index ab6e1f1..d7eafaa 100755
--- a/sweet-alert.js
+++ b/sweet-alert.js
@@ -200,7 +200,8 @@
       confirmButtonColor: '#AEDEF4',
       cancelButtonText: 'Cancel',
       imageUrl: null,
-      imageSize: null
+      imageSize: null,
+      html: false
     };
 
     if (arguments[0] === undefined) {
@@ -224,6 +225,7 @@
           return false;
         }
 
+        params.html               = arguments[0].html;
         params.title              = arguments[0].title;
         params.text               = arguments[0].text || params.text;
         params.type               = arguments[0].type || params.type;
@@ -477,11 +479,18 @@
         $cancelBtn = modal.querySelector('button.cancel'),
         $confirmBtn = modal.querySelector('button.confirm');
 
+      console.log(params.html);
     // Title
-    $title.innerHTML = escapeHtml(params.title).split("\n").join("<br>");
+    if(params.html)
+      $title.innerHTML = params.title.split("\n").join("<br>");
+    else
+      $title.innerHTML = escapeHtml(params.title).split("\n").join("<br>");
 
     // Text
-    $text.innerHTML = escapeHtml(params.text || '').split("\n").join("<br>");
+    if(params.html)
+      $text.innerHTML = params.text.split("\n").join("<br>");
+    else
+      $text.innerHTML = escapeHtml(params.text || '').split("\n").join("<br>");
     if (params.text) {
       show($text);
     }
-3

Я предполагаю, что </ не принимается внутри строки.

попробуйте избежать прямой косой черты "/", предшествуя ей обратной косой чертой"\", например:

var hh = "<b>test<\/b>";
-8