Binding value into TinyMCE <textarea> using AngularJS model

Question

I am developing an ASP.net MVC application with AngularJS and TinyMCE.

I need to display a WYSIWYG textarea to the user to get input.

I am not able to bind initial value into the textarea. Need help. The following is what I have done.

<script type="text/javascript">
    tinyMCE.init({
        mode: "textareas",
        theme: "advanced",
        theme_advanced_path: false,
        theme_advanced_buttons1: "fontselect,|,bold,italic,underline,|,fontsizeselect,|,forecolor,backcolor",
        theme_advanced_buttons2: "|,justifyleft,justifycenter,justifyright,|,link,unlink,|,bullist,numlist,|,code",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,
    });
</script>

View:

<textarea data-ng-model="selectedProduct.ProductText">
  {{selectedProduct.ProductText}}
</textarea>

David Bohunek · Accepted Answer · 2014-08-13 11:19:14Z

2

You definitely want to use this library: https://github.com/angular-ui/ui-tinymce Things get much easier then. A sample:

<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>

myAppModule.controller('MyController', function($scope) {
    $scope.tinymceOptions = {
            //enter any options here
        }
    };
});

answered Aug 13, 2014 at 11:19

David Bohunek

3,2011 gold badge24 silver badges26 bronze badges

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

6 Comments

RandomUser Over a year ago

is it a freeware? and I am using TinyMCE version 3.5.8

David Bohunek Over a year ago

Good question. Yes it is. The license can be found here: github.com/angular-ui/ui-tinymce/blob/master/LICENSE

David Bohunek Over a year ago

It is compatible with version 4+ of TinyMCE, you would have to upgrade then. If you can't or don't want to, I would look at this post: stackoverflow.com/questions/20005699/…

RandomUser Over a year ago

I need help in downloading the library you are mentioning. In the link you provided what file(s) should I download?

David Bohunek Over a year ago

This is the only file you need to download: github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js Add it to your application as dependency: var myAppModule = angular.module('MyApp', ['ui.tinymce'])

|

Collectives™ on Stack Overflow

Binding value into TinyMCE <textarea> using AngularJS model

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related