web-dev-qa-db-ja.com

テキストでの甘い警告表示HTMLコード

スイートアラートプラグインを使用してアラートを表示しています。クラシカルな設定（デフォルト）では、すべてがうまくいきます。しかし、HTMLタグをTEXTに追加する場合、太字にすることなく<b>...</b>を表示します。答えを検索した後、正しい検索ワードがないようです...

甘いアラートにHTMLコードでもテキストを表示させる方法は？

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

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@8"></script>
153
Limon Monte

タイトルおよびテキストパラメータにHTMLを許可する機能が、GitHubのmasterブランチに最近マージされて追加されました https://github.com/t4t5/sweetalert/commit/9c3bcc5cb75e598d6faaa37353ecd84937770f3d

JSON構成を使用して、「html」をtrueに設定するだけです。例：

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

これは1週間未満前にマージされ、README.mdで示唆されています（明示的に説明されていませんが、例の1つでhtmlがfalseに設定されています）が、マーケティングページにはまだ記載されていません http：/ /tristanedwards.me/sweetalert

57
jitmo

古いスイートアラートからアップグレードしていて、新しいバージョンでそれを行う方法を見つけました（ official 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" 
});
21
Vyctorya

2018年の時点で、受け入れられた答えは古くなっています：

Sweetalertは維持されており、元の質問の問題は content オプションを使用して解決できます。

7
GavinR

スイートアラートには「html」オプションもあり、trueに設定します。

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

私はこれに苦労しました。 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}`,
      },
    }

これを行うためのドキュメントはありません。それは純粋な試行錯誤でしたが、少なくともうまくいくようです。

3
Shnigi

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" 
});
0
Silvio Delgado