Question

我将ckeditor添加到我的表单文本区域并且所有功能都正常工作，没有错误消息，但我的提交按钮仍然处于禁用状态（颜色被静音并在悬停时显示划掉的圆圈光标）。

我使用angular / firebase并从我的js文件路由到模板。真的不确定为什么，使用Ckeditor脚本和代码提交/发布按钮工作正常。添加ckeditor会禁用它。感觉与另一个脚本有一些兼容性问题。

主要index.html

  <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>My AngularJS App</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">

   <link rel="stylesheet" href="app.css">
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="//cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>

    </head>
    <body>

    <div ng-view></div>

   <script src="bower_components/angular/angular.js"></script>
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
   <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
   <script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
   <script src="app.js"></script>
    <script src="main/main.js"></script>
    <script src="login/login.js"></script>
    <script src="register/register.js"></script>
    <script src="welcome/welcome.js"></script>
   <script src="addPost/addPost.js"></script>
   <script src="components/version/version.js"></script>
    <script src="components/version/version-directive.js"></script>
   <script src="components/version/interpolate-filter.js"></script>

  </body>

模板addPost.html

     <body ng-controller="AddPostCtrl">
    <div class="container" >

     <form class="form-horizontal" ng-submit="AddPost()">
     <fieldset>

    <!-- Form Name -->
    <legend>Create Post</legend>

   <!-- Text input-->
   <div class="form-group">
  <label class="col-md-4 control-label" for="txtTitle">Title</label>  
    <div class="col-md-4">
 <input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="Title" class="form-control input-md">
  </div>
 </div>

    <!-- 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>
     <script>
        CKEDITOR.replace( 'txtPost' );
    </script>
    </div>
  </div>

  <!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="singlebutton"></label>
 <div class="col-md-4">
  <input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
  </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('/home');
 }

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

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

     var firebaseObj = new Firebase("myblog-xxxx.../Articles");
       var fb = $firebase(firebaseObj);

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

     }
  }]);

将Ckeditor添加到textarea为什么我的提交按钮被禁用？

0 个答案: