4

フォーマットされたhtmlタグも挿入できるangularJsでインライン編集可能なコンテンツを作成したいと思います。

プランカーを作成しました: http://plnkr.co/edit/cHgr6BxzoT3LWhc35kmX?p=preview

しかし、たとえば次のようなhtmlタグを挿入しようとすると:

<b>test</b>

太字のテキストを表示したいのですが、html ではなくプレーン テキストしか表示されません...

[編集]

おそらく、私が何を望んでいるかをうまく説明することはできません。テキストを変更し、たとえばリンク、太字のテキスト、見出しタグなどを追加できる単純なhtmlエディターを作成したいと思います...単にhtmlタグを記述してページにコンパイルします。

コントローラーからテキストを出力したいのであれば、答えは正しいですが、これを編集可能にしたいのです。

4

3 に答える 3

1

ディレクティブの要素のフォーカス/ぼかしを更新すると、目的を達成できます。

ただし、編集するときは、「html編集モード」に戻します

  element.bind("focus", function(){
    scope.name = scope.name.replace(/</g, "&lt;").replace(/>/g, "&gt;");
    scope.$apply();
  })
  element.bind("blur", function() {
    scope.name = element[0].innerHTML.replace(/[&]lt[;]/g, "<").replace(/[&]gt[;]/g, ">");
    scope.$apply();
  });

更新された plunkr: http://plnkr.co/edit/cfSBctBbK6cpwfKrwwWf?p=preview

于 2013-06-10T16:21:28.063 に答える
0

これには指令があります。ng-bindを使用する代わりにng-bind-html-unsafe を使用してください。次に、次のようにリテラル html をモデルに渡すことができます。

$scope.name = '<b>World</b>';

于 2013-06-05T00:00:23.440 に答える
0

AngularUI のCodeMirror UI ディレクティブを使用するか、インスピレーションを得る必要があります。

ここで動作するPlunkerを作成しましたが、依存関係は良くありません。

于 2013-06-06T11:29:57.097 に答える