AngularJs Embeddable HTML Tag Editor

Question

I would like to create inline editable content in angularJs that could also insert an html formatted tag.

I created a plunker: http://plnkr.co/edit/cHgr6BxzoT3LWhc35kmX?p=preview

But when I try to insert some html tag, for example, for example:

<b>test</b> 

I would like to get bold text, but it only shows plain text, not html ...

[EDIT]

Perhaps I can’t explain what I want. I would like to create a simple html editor that can change the text and, for example, add a link, bold text, title tags, etc ... just write the html tag and compile it on the page.

The answers are correct if I want to output text from my controller, but I want to make it editable.

Answer 1

If you update the focus / blur element for your directive, you can achieve what you want.

When you edit it, I will return to html editing mode

  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(); }); 

updated plunkr: http://plnkr.co/edit/cfSBctBbK6cpwfKrwwWf?p=preview

Answer 2

There is a directive for this. Instead of using ng-bind, use ng-bind-html-unsafe . Then you can go to your sample html literal as follows:

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

Answer 3

You must use or inspire yourself with the CodeMirror UI directive from AngularUI .

Made a working Plunker here , but the dependencies are not very good.