tinymce is not working inside ng-view?

Question

I am working in a MEAN project.

At the back end I need tinymce for cms editing.

I am using ng-view for each page content. but tiny mce is not working inside ng-view

here is my index.html file here it is working fine

<html lang="en" ng-app="AdminApp" >
<head>
<script type="text/javascript" src="/asset/tiny/tiny_mce/tiny_mce.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script type="text/javascript" src="includes/tinymce.js"></script>
    <script type="text/javascript">
    tinyMCE.init({
        // General options
        width : "505",
        height : "150",
        mode : "textareas",
        theme : "advanced",
        extended_valid_elements : "iframe[src|width|height|name|align|type|class|frameborder]",
        plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,imagemanager",

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,search,replace,|,media,|,bullist,numlist,|,blockquote,|,undo,redo,|,link,unlink,|,",
        theme_advanced_buttons2 : "fontsizeselect,forecolor,backcolor,|,preview,fullscreen,code,insertimage",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        relative_urls : false,
        remove_script_host : false,
        document_base_url : "",
        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",


        // Style formats
        style_formats : [
            {title : 'Bold text', inline : 'b'},
            {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
            {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
            {title : 'Example 1', inline : 'span', classes : 'example1'},
            {title : 'Example 2', inline : 'span', classes : 'example2'},
            {title : 'Table styles'},
            {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
        ],

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    });
</script>
<base href="/admin/" />
</head>

<body>


<!--div ng-view></div-->
<textarea>hello</textarea>
</body>
</html>

inside ng-view code

  <textarea>home</textarea>

I am using node.js server

Please help me to solve this

Thank you

Kalpesh Patel · Answer 1 · 2017-04-24T05:00:36.347

You can't use tinymce as is in angularjs applications. You should create first directive for that.

However there is already directive for that which you can use: https://github.com/angular-ui/ui-tinymce

Here is the steps to get started with it once you have downloaded ui-tinymce:

index.html

<!DOCTYPE html>
<head>
  <script type="text/javascript" src="bower_components/tinymce-dist/tinymce.js"></script>
  <script type="text/javascript" src="bower_components/angular/angular.js"></script>
  <script type="text/javascript" src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp">
  <form method="post" ng-controller="TinyMceController">
    <textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
    <button ng-click="getContent()">Get content</button>
    <button ng-click="setContent()">Set content</button>
  </form>
</body>

app.js

var myAppModule = angular.module('myApp', ['ui.tinymce']);

myAppModule.controller('TinyMceController', function($scope) {
  $scope.tinymceModel = 'Initial content';

  $scope.getContent = function() {
    console.log('Editor content:', $scope.tinymceModel);
  };

  $scope.setContent = function() {
    $scope.tinymceModel = 'Time: ' + (new Date());
  };

  $scope.tinymceOptions = {
    plugins: 'link image code',
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
  };
});

The best way to answer is to put the code in some quantity. What happen if in future all the link will not exist? — Utkarsh Dubey, Apr 24 '17 at 04:55
My code is working. but the same is not working under ng-view.Here also same this code also not working in ng-view .Is there a way to do this under ng-view — user1187, Apr 24 '17 at 10:17

Utkarsh Dubey · Answer 2 · 2017-04-24T15:13:40.677

Hope, it works for you. Reference Link - http://embed.plnkr.co/vL7MqL/

Index.html

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-route.min.js"></script>

<script type="text/javascript" src="tinymce.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

<div  ng-app="plunker"> 
    <ng-view></ng-view>
</div>

view.html

<textarea data-ui-tinymce data-ng-model="modal.one"></textarea>
change in the input doesn't change the textarea<br>
<input ng-model="modal.one">

tinymce.js

/**
 * Binds a TinyMCE widget to <textarea> elements.
 */
angular.module('ui.tinymce', [])
    .value('uiTinymceConfig', {})
    .directive('uiTinymce', ['uiTinymceConfig', function(uiTinymceConfig) {
    uiTinymceConfig = uiTinymceConfig || {};
    var generatedIds = 0;
    return {
        require: '?ngModel',
        link: function(scope, elm, attrs, ngModel) {
            var expression, options, tinyInstance;
            // generate an ID if not present
            if (!attrs.id) {
                attrs.$set('id', 'uiTinymce' + generatedIds++);
            }
            options = {
                // Update model when calling setContent (such as from the source editor popup)
                setup: function(ed) {
                    ed.on('init', function(args) {
                        ngModel.$render();
                    });
                    // Update model on button click
                    ed.on('ExecCommand', function(e) {
                        ed.save();
                        ngModel.$setViewValue(elm.val());
                        if (!scope.$$phase) {
                            scope.$apply();
                        }
                    });
                    // Update model on keypress
                    ed.on('KeyUp', function(e) {
                        console.log(ed.isDirty());
                        ed.save();
                        ngModel.$setViewValue(elm.val());
                        if (!scope.$$phase) {
                            scope.$apply();
                        }
                    });
                },
                mode: 'exact',
                elements: attrs.id
            };
            if (attrs.uiTinymce) {
                expression = scope.$eval(attrs.uiTinymce);
            } else {
                expression = {};
            }
            angular.extend(options, uiTinymceConfig, expression);
            setTimeout(function() {
                tinymce.init(options);
            });

            ngModel.$render = function() {
              console.log("render")
                if (!tinyInstance) {
                    tinyInstance = tinymce.get(attrs.id);
                }
                if (tinyInstance) {
                    tinyInstance.setContent(ngModel.$viewValue || '');
                }
            };
        }
    };
}]);

example.js

var myApp = angular.module('plunker', ['ngRoute','ui.tinymce','ui.bootstrap']).
  config(['$routeProvider', function($routeProvider) {
    console.log("init angular");
    $routeProvider.when('/', {templateUrl: 'view.html', controller: 'View'});
    $routeProvider.otherwise({redirectTo: '/'});
  }]);

myApp.controller('View', ['$scope', function ($scope) {
    console.log("View Controller");
    $scope.modal = {one:"hello"};
}])

angular.module('MyApp', ['ui.tinymce']) in this line if you add 'ngRoute' then its not working.Do you know the reason — user1187, Apr 24 '17 at 09:51
i need to use this for admin. here header will be the common and i am using ng-view for displaying each pages — user1187, Apr 24 '17 at 09:56
https://jsfiddle.net/athisandy/o7ya7v5n/1/ please check this here is my code after using ng-route its not working.and also I need this under ng-view — user1187, Apr 24 '17 at 10:42

tinymce is not working inside ng-view?

2 Answers2