nicEdit无法在模板中工作

我正在尝试将wysiwyg nicEdit文本编辑器添加到我的文本区域。当我转到实际的templateUrl时，文本框和工具栏可以正常工作，但它们没有正确提交（到我的firebase数据库）。当我转到要呈现模板的页面时，我无法获得nicEdit工具栏功能，只能获取常规文本区域框。我正在使用angularjs，并将templateurl作为addPost.html。nicEdit无法在模板中工作

因此，模板在我转到＃/ addPost时会呈现，但不会与工作nicEdit功能一起呈现，但直接转到模板url addPost.html确实有nicEdit功能，但不会提交给我的firebase db 。任何人都有一个想法，为什么这是这样吗？谢谢。

模板文件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); 
    }); 

    } 
    }]);

要#addPost显示了出来nicEdit工作

但要实际templateUrl模板addPost.html它工作正常，减去不能提交

来源

2015-11-03 sp312

该问题与尝试运行脚本Angular html partials有关。简单的解决方案是将您需要的脚本移动到ng-view以外的主索引文件的头部，虽然它看起来（根据其他stackoverflow帖子）技术上可能试图让这些脚本执行：

“ AngularJS：如何在ng-include内创建角度加载脚本？“ https://stackoverflow.com/a/19715343/1078450

（另外，你在你的头文件，它是不可能被渲染HTML有：<nav class="blog-nav">）

来源

2015-11-03 01:31:54 wesww

尝试将脚本文件移动到我的主要索引文件的头部以外的ng-view，它仍然不会将nicedit特征呈现到我的模板上的文本区域。我没有使用ng-include来添加模板，只是使用.config重定向路径。然而，nav class html确实在模板中呈现。对不起，新的，但认为我可以通过使用ng-include来解决这个问题，从你给出的链接中的信息呈现部分。谢谢。 – sp312

再次尝试与ckeditor而不是nicedit，它的工作。谢谢！ – sp312

嗯，我有同样的问题，在模板NicEdit的初始化。首先我使用onDomLoaded（）else，但最好等待文档。用jQuery我使用document.ready。

采取这里一看，pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

的问题是要告诉NicEditor新的文本区域。这里有一个代码示例在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(); 
});

而且here是动态NicEdit使用的一个工作实施例。

来源

2015-11-03 08:29:46 nevtag

nicEdit无法在模板中工作

回答

相关问题