4

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

我创建了一个 plunker：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 回答