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無法在模板中工作

回答

相關問題