4

I have an editable div and I want to store the HTML content in scope variable scope.myText:

<div id="editor" contenteditable="true" ng-model="myText">
    <p>HTML Text</p>
</div>

How can I do that in Angular? Is there any directive to solve this problem? I appreciate any help, thanks.

5
  • 1
    What is the wysiwyg called? because there are angular plugins for tinymce github.com/angular-ui/ui-tinymce and ckeditor also but not sure how complete it is. Or even better if you just need a light text wysiwyg - textangular.com
    – Dylan
    Aug 6, 2014 at 0:56
  • The html control you are seeing like text, input, etc. are actually all directives so that ng-model works. There is no directive for div.
    – zs2020
    Aug 6, 2014 at 18:04
  • Hi @Dylan, I'm using SnapEditor, I have made an implementation using ng-blur that works for me. Thanks for the suggestions I will take a look to textangular.
    – Ragnar
    Aug 6, 2014 at 18:07
  • 1
    Have you considered this? textangular.com
    – Blowsie
    Aug 6, 2014 at 22:13
  • Yes, but I need one editor with floating toolbar, for that reason I'm using SnapEditor, thanks
    – Ragnar
    Aug 6, 2014 at 22:35

2 Answers 2

2

I found the solution to this problem using ng-blur directive:

Controller:

$scope.updateModel = function(){
    $scope.myText = angular.element(editor).html();
    //if you are using jquery use this line:
    //$scope.myText = $('#editor').html();
};

If you want to initialize the editor content use this:

angular.element(editor).html('<p>initial content</p>'); 
//thanks to @PatrickGrimard

or with jquery:

$('#editor').html('<p>initial content</p>');

View:

<div id="editor" contenteditable="true" data-ng-blur="updateModel()">
    <p>HTML Text</p>
</div>
{{myText}}
0

Why not use a textarea inside your div instead, then you can just use ng-model on it.

4
  • No, I can't use a textarea, because the div is a WYSIWYG editor, and it doesn't use a textarea.
    – Ragnar
    Aug 5, 2014 at 23:13
  • You could use angular.element() to get your div, then call .html() to get the contents and store it on the scope. Aug 5, 2014 at 23:15
  • Thanks, but how can I do that with angular.select? In the documentation angular.select refers to HTML component <select></select>.
    – Ragnar
    Aug 5, 2014 at 23:22
  • I'm not sure what you're referring to. I'm making suggestions to a solution. Aug 6, 2014 at 0:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.