nicEdit在模板中不工作
我正在尝试将wysiwyg nicEdit文本编辑器添加到我的文本区域。当我进入实际的templateUrl时，文本框和工具栏可以工作，但是它们不能正确地提交(到我的防火墙数据库)。当我进入页面，即呈现模板时，我无法获得nicEdit工具栏特性，而只能获得一个常规文本框。我使用angularjs，并以addPost.html的形式使用templateurl。
因此，当我转到#/addPost时，模板也会呈现，但不会使用工作的nicEdit特性，但是直接转到模板url addPost.html确实可以使用nicEdit特性，但不会提交到我的消防数据库。有人知道为什么会这样吗？谢谢。
模板文件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中，它工作得很好，减去不能提交
回答 2
Stack Overflow用户
发布于 2015-11-03 01:31:54
这个问题与试图运行脚本有角度的html部分有关。简单的解决方案是将所需的脚本移到ng-view之外的主索引文件的头上，尽管从技术上看(根据其他堆栈溢出帖子)，似乎有可能尝试让这些脚本执行：
"AngularJS:如何在ng-include中制作角加载脚本？“https://stackoverflow.com/a/19715343/1078450
(而且，您的头文件中有不太可能呈现的html：<nav class="blog-nav">)
Stack Overflow用户
发布于 2015-11-03 08:29:46
嗯，我也遇到了同样的问题，在模板中初始化NicEdit。首先，我使用了onDomLoaded() better，但最好是等待文档。对于jQuery，我使用document.ready。
看看这里，纯JavaScript，相当于jQuery的$.ready()如何在页面/dom准备好时调用函数
问题是告诉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();
});这里是动态NicEdit使用的一个工作示例。
https://stackoverflow.com/questions/33489587
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号