AngularJs inline editing insert html tag

Question

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.

try ngBindHtmlUnsafe docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe — Idrees Khan
– Idrees Khan, Commented Jun 2, 2013 at 12:05
try updating with this works => $scope.name = '<b>World</b>'; — Idrees Khan
– Idrees Khan, Commented Jun 2, 2013 at 13:33
I've tried....but I want to make editable content generates new html tag to show formatted text. — Tropicalista
– Tropicalista, Commented Jun 2, 2013 at 13:40

Mathew Berg · Accepted Answer · 2013-06-10 16:21:28Z

1

+50

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

answered Jun 10, 2013 at 16:21

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boris Bucha · Accepted Answer · 2013-06-05 00:00:23Z

0

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>';

answered Jun 5, 2013 at 0:00

Boris Bucha

6324 silver badges6 bronze badges

2 Comments

Boris Bucha Over a year ago

from your plunkr i can see that you are not only trying to bind to model but you want to wrap it into directive with contenteditable. in that case have a look at $compile() function [docs.angularjs.org/api/ng.$compile] in your link() function in directive you have to call it over template html so that your binding expressions become "alive"

Boris Bucha Over a year ago

or jusr use "template" property of your directive definition instead of link() function. if you insert your html in "template" it is compilled automatically. then you also need to bind your scope properties with "scope" directive property like scope: {name: '='}

Caio Cunha · Accepted Answer · 2013-06-06 11:29:57Z

0

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

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

answered Jun 6, 2013 at 11:29

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

Collectives™ on Stack Overflow

AngularJs inline editing insert html tag

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related