Get TinyMCE textcontent in AngularJS controller

Question

I'm beggining with angularJS and what I want is to submit a form with an tinymce-ui textarea and submit both the HTML content and text content.

For now I have the tinyMce textarea working.

   <div>
    <form method="post">
    <textarea ui-tinymce="tinymceOptions" ng-model="user.commentaireValue" id="tinymce1"></textarea>
            <textarea>{{user.commentaireValue}}</textarea>
            <textarea id="IwouldLikeNonHtmlContent">{{HELPME}}</textarea>
        </form>
    </div>

If I type in the console

   tinyMCE.get('tinymce1').getBody().textContent

I get what I want. I just can't figure out how to retrieve it in my controller

   app.controller('UserCreationCtrl', ['$scope', 'UsersFactory', '$location',
     function ($scope, UsersFactory, $location) {
    // callback for ng-click 'createNewUser':
    $scope.createNewUser = function () {
        UsersFactory.create($scope.user);
        $location.path('/user-list');
    };
    $scope.options=[
        {name:'black', shade:'dark'},
        {name:'white', shade:'light'},
        {name:'red', shade:'dark'},
        {name:'blue', shade:'dark'},
        {name:'yellow', shade:'light'}
    ];
    $scope.correctlySelected = $scope.options[1];
    $scope.tinymceOptions = {
        resize: false,
        width: 400,  // I *think* its a number and not '400' string
        height: 300,
        plugins: 'textcolor link',
        toolbar: "undo redo styleselect bold italic forecolor backcolor",
        menu : { // this is the complete default configuration
            edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},
            insert : {title : 'Insert', items : 'link media | template hr'},
            format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        }
    };
    //tinyMCE.get('tinymce1').getBody().textContent;
}]);

How can I do that without using sanitize function ? Thnak you.

it is bound to `$scope.user.commentaireValue` by the `ng-model` you set. — charlietfl, Jul 06 '14 at 15:22

score 3 · Accepted Answer · answered Jul 06 '14 at 19:12

You can use the init_instance_callback to attach event listeners for KeyUp, ExecCommand and SetContent within the active tinymce editor and bind a $scope variable whenever these events are triggered. If you check the ui-tinymce directive source code you will see that these events are used to update the model.

JAVASCRIPT

$scope.tinymceOptions = {
        resize: false,
        width: 400,  // I *think* its a number and not '400' string
        height: 300,
        plugins: 'textcolor link',
        toolbar: "undo redo styleselect bold italic forecolor backcolor",
        menu : { // this is the complete default configuration
            edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},
            insert : {title : 'Insert', items : 'link media | template hr'},
            format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        },

        init_instance_callback: function(editor) {
          var textContentTrigger = function() {
            $scope.textContent = editor.getBody().textContent;
            $scope.$apply();
          };

          editor.on('KeyUp', textContentTrigger);
          editor.on('ExecCommand', textContentTrigger);
          editor.on('SetContent', function(e) {
            if(!e.initial)
              textContentTrigger();
          });
        }
    };

HTML

<textarea>{{textContent}}</textarea>

Thanks ! It works like a charm :) Just in case it could help someone I was looking for editor.getContent({format : 'text'}); in order to retrieve line breaks with raw text. — STANISLAS PIERRE-ALEXANDRE, Jul 07 '14 at 18:19

Get TinyMCE textcontent in AngularJS controller

1 Answers1