Question

我想在angularJs中创建一个可以插入格式化的html标签的内联可编辑内容。

我创建了一个plunker：http://plnkr.co/edit/cHgr6BxzoT3LWhc35kmX?p=preview

但是当我尝试插入一些html标签时，例如：

<b>test</b>

我想看一个粗体文字，但它只显示纯文本而不是HTML ...

[编辑]

可能我不能很好地解释我想要的东西。我想创建一个简单的html编辑器，它可以修改文本，例如添加链接，粗体文本，标题标签等...只需编写html标记并在页面中编译。

如果我想从控制器输出文本，答案是正确的，但我想让它可编辑。

Answer 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

Answer 2

有一个指令。而不是使用 ng-bind 使用 ng-bind-html-unsafe 。然后你可以像这样传递你的模型文字html：

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

Answer 3

您应该使用来自CodeMirror UI directive的AngularUI来使用或激励自己。

做了一个工作Plunker here，但依赖关系并不好。

AngularJs内联编辑插入html标记

3 个答案: