nicEdit doesn't work in templates

Question

I'm trying to add the wysiwyg nicEdit text editor to my text areas. When I goto the actual templateUrl the textbox and tool bar do work but they do not submit correctly (to my firebase db). When I goto the page that is to render the template I am unable to get get nicEdit toolbar features and just get a regular text area box. I'm using angularjs and have the templateurl as addPost.html.

So again the template does render when I goto #/addPost but not with the working nicEdit features, yet going directly to the template url addPost.html does have the nicEdit features working but then won't submit to my firebase db. Anyone have an idea on why this is so? Thanks.

Template file addPost.html:

         <head>
         <script type="text/javascript" language="javascript" src="../nicEdit.js"></script>
         <script type="text/javascript" language="javascript">
         bkLib.onDomLoaded(nicEditors.allTextAreas);
         </script>
      <!-- Bootstrap core CSS -->
      <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
     <nav class="blog-nav">
     <a class="blog-nav-item " href="#/welcome">Home</a>
     <a class="blog-nav-item active" href="#/addPost">Add Post</a>
     <a class="blog-nav-item " style="cursor:pointer;" ng-click="logout();">Logout</a>
     </nav>

    </head>
   <body ng-controller="AddPostCtrl">

  <div class="container" >

  <form class="form-horizontal" ng-submit="AddPost()">
  <fieldset>
   <!-- Form Name -->
    <legend>Create Post</legend>

       <!-- Textarea -->
       <div class="form-group">
    <label class="col-md-4 control-label" for="txtPost">Post</label>
    <div class="col-md-4">                     
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
   </div>
   </div>
 </fieldset>
  </form>
   </div><!-- /.container -->
   </body>

addPost.js

      'use strict';

     angular.module('myApp.addPost', ['ngRoute'])

      .config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/addPost', {
       templateUrl: 'addPost/addPost.html',
       controller: 'AddPostCtrl'
    });
   }])

    .controller('AddPostCtrl', ['$scope','$firebase','$location','CommonProp',function($scope,$firebase,      $location,CommonProp) {
    if(!CommonProp.getUser()){
    $location.path('/main');
  }

    $scope.logout = function(){
    CommonProp.logoutUser();
 }

    $scope.AddPost = function(){
     var title = $scope.article.title;
     var date = $scope.article.date;

      var post = $scope.article.post;

      var firebaseObj = new Firebase("http://..");
      var fb = $firebase(firebaseObj);

    fb.$push({ title: title, date: date, post: post,emailId:       CommonProp.getUser() }).then(function(ref) {
      console.log(ref); 
     $location.path('/welcome');
  }, function(error) {
    console.log("Error:", error);
  });

  }
  }]);

Going to #addPost shows the template with out nicEdit working

But going to the actual templateUrl addPost.html it works fine, minus not being able to submit

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

The problem has to do with trying to run scripts Angular html partials. The simple solution is to move the scripts you need to the head of your main index file, outside of ng-view, though it does seem (according to other stackoverflow posts) technically possibly to try to get these scripts to execute:

"AngularJS: How to make angular load script inside ng-include?" https://stackoverflow.com/a/19715343/1078450

(Also, you have html in your head file that is not likely to be rendered: <nav class="blog-nav">)

edited May 23 '17 at 12:03

Community

1
1

answered Nov 03 '15 at 01:31

wesww

2,863
18
16

Tried moving the script files to the head of my main index file outside of ng-view and it still doesn't render the nicedit features to the text area on my template. I'm not using ng-include to add the templates though, just redirecting routes with a .config. The nav class html does render in the template though. Sorry new to this, but thinking I can fix this by using ng-include to render the partial from the information in the link you've given. Thanks. – sp312 Nov 03 '15 at 02:04
Tried this again with ckeditor instead of nicedit and it worked. Thanks! – sp312 Nov 03 '15 at 21:41

score 1 · Answer 2 · edited May 23 '17 at 12:14

Well, I have had the same problem, with initialisation of NicEdit in templates. First I used onDomLoaded() else, but it's better to wait for the document. With jQuery I use document.ready.

Take a look here, pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

The problem is to tell NicEditor the new textarea. Here a code sample to do this in jQuery.

var idnr = 0;
var NicEditor = new nicEditor();

$('#add').click(function(){
   var $clone = $('#dummy').clone();
   var id = 't_' + idnr;
   idnr = idnr + 1;
   $clone.attr('id',id).attr('name',id).removeClass('dummy');
   $('#wrapper').append($clone);
   NicEditor.panelInstance(id);
   $(nicEditors.findEditor(id).elm).focus();
});

And here is a working Example of dynamic NicEdit use.

nicEdit doesn't work in templates

2 Answers2