CODEWITHSUNDEEP
angularjs
Tropicalista
Tropicalista

Reputation: 3137

AngularJs inline editing insert html tag

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

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

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

<b>test</b>

I'd like to see a bold text, but it only show plain text and not html...

[EDIT]

Probably I cannot explain well what I want. I would like to crate a simple html editor, which can modify a text and for example add link, bold text, heading tags etc... simply writing the html tag and compile in the page.

The answers are right if I would like to output a text from my controller, but I wanna make this editable.

Upvotes: 4

Views: 1812

Answers (3)

Mathew Berg
Mathew Berg

Reputation: 28750

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

When you edit it though, I have it switch back into the "html edit 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

Upvotes: 1

Caio Cunha
Caio Cunha

Reputation: 23394

You should use or inspire yourself with CodeMirror UI directive, from AngularUI.

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

Upvotes: 0

Boris Bucha
Boris Bucha

Reputation: 632

There is a directive for this. Instead of using ng-bind use ng-bind-html-unsafe. Then you can pass to your model literal html like this:

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

Upvotes: 0

Related Questions