Tinymce textarea not working with AngularJS

Question

My code works fine when I use textbox and not the TinyMce text area. After using TinyMce in my code, data entered in text area is no longer going into my model.

<script>
        tinymce.init({
            selector: 'textarea',
            width: 900,
            height: 200,
            toolbar1: "undo redo | styleselect | bold italic underline superscript     subscript | cut copy paste ",
            statusbar: false,
            menubar: false,
            plugins: "spellchecker",
            font_formats: "Andale Mono=andale mono,times;" +
       "Arial=arial,helvetica,sans-serif;" +
       "Arial Black=arial black,avant garde;" +
       "Courier New=courier new,courier;" +
       "Georgia=georgia,palatino;" +
       "Helvetica=helvetica;" +
       "Symbol=symbol;" +
       "Tahoma=tahoma,arial,helvetica,sans-serif;" +
       "Times New Roman=times new roman,times;" +
       "Verdana=verdana,geneva;",
            fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"
        });

    </script>

my html File is:

<textarea id="QuestionText" ng-model="send.questiontext"></textarea>
{{send}}

why is object not getting printed or why is data no longer binded to my model. ?

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

What you are expecting of angular right now is the equivalent of writing some jquery to manipulate the DOM alongside angular. This method is against angular way of doing things.

I suggest you start using the angular implementation of tinyMCE

And also spend some time reading this fantastic post about thinking in Angular

edited May 23 '17 at 11:46

Community

1
1

answered May 22 '14 at 10:28

makeitmorehuman

11,287
3
52
76

That's not an _angular implementation of tinyMCE_, but a simple binding TO tinyMCE.js. – Flint Nov 27 '14 at 23:04

score 0 · Answer 2 · answered Nov 27 '14 at 22:59

TinyMCE keeps its own buffer accessible through tinymce.activeeditor.[get|set]content().

A directive for a quick binding with a ng-model can be found here : codepen : angular directive for tinyMCE , the same code than angular-ui-tinymce. Fast typers will find it microseconds too slow sometimes.

Other solutions exist to integrate a rich text editor in an angular application :

scribe + angular exemple (the demo shows trouble with copy/paste and paragraphs)
quill with angular (coffe script exemple)

Tinymce textarea not working with AngularJS

2 Answers2