CODEWITHSUNDEEP
angularjstemplatesnicedit
sp312
sp312

Reputation: 49

nicEdit doesn't work in templates

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 enter image description here

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

Upvotes: 0

Views: 1889

Answers (2)

nevtag
nevtag

Reputation: 314

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.

Upvotes: 1

wesww
wesww

Reputation: 2873

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">)

Upvotes: 1

Related Questions