2015-06-20 116 views
1

使用布局页面有一个布局页面和一个页面。在Create页面中有一个文本区域id= editor1。在所有的JS和CSS都加载成功。但CKEditor的不显示,只是一个空白的textareaASP.NET MVC不显示ckeditor

输出:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 
<title>SB Admin 2 - Bootstrap Admin Theme</title> 
<!-- Bootstrap Core CSS --> 
<link href="/css/bootstrap.css" rel="stylesheet"> 
<link href="/css/font-awesome.css" rel="stylesheet"> 
<link href="/css/sb-admin-2.css" rel="stylesheet"> 
<link href="/css/jquery-ui.css" rel="stylesheet" /> 
<script src="/js/jquery-1.10.2.min.js"></script> 
<script src="/ckeditor/ckeditor.js"></script> 
<script src="/js/jquery-ui.js"></script> 
<link href="/css/jquery-ui/style.css" rel="stylesheet"/> 
<script type="text/javascript"> 
    $('#editor1').ckeditor(); 
</script> 
<script src="/ckeditor/ckeditor.js"></script> 

<!-- MetisMenu CSS --> 
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet"> 
<!-- Custom CSS --> 
<link href="../dist/css/sb-admin-2.css" rel="stylesheet"> 
<!-- Custom Fonts --> 
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
<![endif]--> 

</head> 
<body> 
    <div id="wrapper"> 
     <!-- Navigation --> 
     <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="index.html">SB Admin v2.0</a> 
      </div> 
      <!-- /.navbar-header --> 
      <ul class="nav navbar-top-links navbar-right"> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i> 
        </a> 
        <ul class="dropdown-menu dropdown-messages"> 
         <li> 
          <a href="#"> 
           <div> 
            <strong>John Smith</strong> 
            <span class="pull-right text-muted"> 
             <em>Yesterday</em> 
            </span> 
           </div> 
           <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <strong>John Smith</strong> 
            <span class="pull-right text-muted"> 
             <em>Yesterday</em> 
            </span> 
           </div> 
           <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <strong>John Smith</strong> 
            <span class="pull-right text-muted"> 
             <em>Yesterday</em> 
            </span> 
           </div> 
           <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a class="text-center" href="#"> 
           <strong>Read All Messages</strong> 
           <i class="fa fa-angle-right"></i> 
          </a> 
         </li> 
        </ul> 
        <!-- /.dropdown-messages --> 
       </li> 
       <!-- /.dropdown --> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i> 
        </a> 
        <ul class="dropdown-menu dropdown-tasks"> 
         <li> 
          <a href="#"> 
           <div> 
            <p> 
             <strong>Task 1</strong> 
             <span class="pull-right text-muted">40% Complete</span> 
            </p> 
            <div class="progress progress-striped active"> 
             <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> 
              <span class="sr-only">40% Complete (success)</span> 
             </div> 
            </div> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <p> 
             <strong>Task 2</strong> 
             <span class="pull-right text-muted">20% Complete</span> 
            </p> 
            <div class="progress progress-striped active"> 
             <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> 
              <span class="sr-only">20% Complete</span> 
             </div> 
            </div> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <p> 
             <strong>Task 3</strong> 
             <span class="pull-right text-muted">60% Complete</span> 
            </p> 
            <div class="progress progress-striped active"> 
             <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> 
              <span class="sr-only">60% Complete (warning)</span> 
             </div> 
            </div> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <p> 
             <strong>Task 4</strong> 
             <span class="pull-right text-muted">80% Complete</span> 
            </p> 
            <div class="progress progress-striped active"> 
             <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> 
              <span class="sr-only">80% Complete (danger)</span> 
             </div> 
            </div> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a class="text-center" href="#"> 
           <strong>See All Tasks</strong> 
           <i class="fa fa-angle-right"></i> 
          </a> 
         </li> 
        </ul> 
        <!-- /.dropdown-tasks --> 
       </li> 
       <!-- /.dropdown --> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i> 
        </a> 
        <ul class="dropdown-menu dropdown-alerts"> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-comment fa-fw"></i> New Comment 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-twitter fa-fw"></i> 3 New Followers 
            <span class="pull-right text-muted small">12 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-envelope fa-fw"></i> Message Sent 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-tasks fa-fw"></i> New Task 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-upload fa-fw"></i> Server Rebooted 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a class="text-center" href="#"> 
           <strong>See All Alerts</strong> 
           <i class="fa fa-angle-right"></i> 
          </a> 
         </li> 
        </ul> 
        <!-- /.dropdown-alerts --> 
       </li> 
       <!-- /.dropdown --> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i> 
        </a> 
        <ul class="dropdown-menu dropdown-user"> 
         <li> 
          <a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a> 
         </li> 
         <li> 
          <a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a> 
         </li> 
        </ul> 
        <!-- /.dropdown-user --> 
       </li> 
       <!-- /.dropdown --> 
      </ul> 
      <!-- /.navbar-top-links --> 
      <div class="navbar-default sidebar" role="navigation"> 
       <div class="sidebar-nav navbar-collapse"> 
        <ul class="nav" id="side-menu"> 
         <li class="sidebar-search"> 
          <div class="input-group custom-search-form"> 
           <input type="text" class="form-control" placeholder="Search..."> 
           <span class="input-group-btn"> 
            <button class="btn btn-default" type="button"> 
             <i class="fa fa-search"></i> 
            </button> 
           </span> 
          </div> 
          <!-- /input-group --> 
         </li> 
         <li> 

          <a href="/Home"> 
           <i class="fa fa-dashboard fa-fw"></i> Dashboard 
          </a> 
         </li> 
         <li> 
          <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Quản lý chung<span class="fa arrow"></span></a> 
          <ul class="nav nav-second-level"> 
           <li> 
            <a href="/">Quản lý loại</a> 
           </li> 
           <li> 
            <a href="/BeDanhMuc">Quản lý danh mục</a> 
           </li> 
           <li> 
            <a href="/BeSach">Quản lý sách</a> 
           </li> 
           <li> 
            <a href="/BeTacGia">Quản lý tác giả</a> 
           </li> 
           <li> 
            <a href="/BeNXB">Quản lý nhà xuất bản</a> 
           </li> 
           <li> 
            <a href="/BeDoiTac">Quản lý đối tác vận chuyển</a> 
           </li> 
           <li> 
            <a href="/BeTinhThanh">Quản lý tỉnh thành</a> 
           </li> 
           <li> 
            <a href="/BeDonHang">Quản lý Đơn hàng</a> 
           </li> 
          </ul> 
          <!-- /.nav-second-level --> 
         </li> 
         <li> 

          <a href="/Forms"><i class="fa fa-table fa-fw"></i>Form</a> 
         </li> 
         <li> 
          <a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a> 
         </li> 
         <li> 
          <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a> 
          <ul class="nav nav-second-level"> 
           <li> 
            <a href="panels-wells.html">Panels and Wells</a> 
           </li> 
           <li> 
            <a href="buttons.html">Buttons</a> 
           </li> 
           <li> 
            <a href="notifications.html">Notifications</a> 
           </li> 
           <li> 
            <a href="typography.html">Typography</a> 
           </li> 
           <li> 
            <a href="icons.html"> Icons</a> 
           </li> 
           <li> 
            <a href="grid.html">Grid</a> 
           </li> 
          </ul> 
          <!-- /.nav-second-level --> 
         </li> 
         <li> 
          <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a> 
          <ul class="nav nav-second-level"> 
           <li> 
            <a href="#">Second Level Item</a> 
           </li> 
           <li> 
            <a href="#">Second Level Item</a> 
           </li> 
           <li> 
            <a href="#">Third Level <span class="fa arrow"></span></a> 
            <ul class="nav nav-third-level"> 
             <li> 
              <a href="#">Third Level Item</a> 
             </li> 
             <li> 
              <a href="#">Third Level Item</a> 
             </li> 
             <li> 
              <a href="#">Third Level Item</a> 
             </li> 
             <li> 
              <a href="#">Third Level Item</a> 
             </li> 
            </ul> 
            <!-- /.nav-third-level --> 
           </li> 
          </ul> 
          <!-- /.nav-second-level --> 
         </li> 
         <li class="active"> 
          <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a> 
          <ul class="nav nav-second-level"> 
           <li> 
            <a class="active" href="blank.html">Blank Page</a> 
           </li> 
           <li> 
            <a href="login.html">Login Page</a> 
           </li> 
          </ul> 
          <!-- /.nav-second-level --> 
         </li> 
        </ul> 
       </div> 
       <!-- /.sidebar-collapse --> 
      </div> 
      <!-- /.navbar-static-side --> 
     </nav> 
     <!-- Page Content --> 
     <div id="page-wrapper"> 



<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 
<h2>Create</h2> 

<form action="/BeTacGia/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="kzj5sfQHJry54YaqB11hNT3F_72kkly2EG6JnofMrGtIVcAO4YbNUk7aD1wv7db0OPEEUsVdmvT96Nv_tWPer3RkDY1PMLqJskWGDWkT-WQ1" /> <div class="form-horizontal"> 
     <h4>TacGia</h4> 
     <hr /> 
     <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">Nunc tincidunt</a></li> 
       <li><a href="#tabs-2">Proin dolor</a></li> 
       <li><a href="#tabs-3">Aenean lacinia</a></li> 
      </ul> 
      <div id="tabs-1"> 

       <div class="form-group"> 
        <label class="control-label col-md-2" for="Ten">Ten</label> 
        <div class="col-md-10"> 
         <input class="form-control text-box single-line" id="Ten" name="Ten" type="text" value="" /> 
         <span class="field-validation-valid text-danger" data-valmsg-for="Ten" data-valmsg-replace="true"></span> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="control-label col-md-2" for="NgaySinh">NgaySinh</label> 
        <div class="col-md-10"> 
         <input class="form-control text-box single-line" data-val="true" data-val-date="The field NgaySinh must be a date." data-val-required="The NgaySinh field is required." id="ngaySinh" name="NgaySinh" type="datetime" value="" /> 
         <span class="field-validation-valid text-danger" data-valmsg-for="NgaySinh" data-valmsg-replace="true"></span> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="control-label col-md-2" for="NgayMat">NgayMat</label> 
        <div class="col-md-10"> 
         <input class="form-control text-box single-line" data-val="true" data-val-date="The field NgayMat must be a date." id="NgayMat" name="NgayMat" type="datetime" value="" /> 
         <span class="field-validation-valid text-danger" data-valmsg-for="NgayMat" data-valmsg-replace="true"></span> 
        </div> 
       </div> 



       <div class="form-group"> 
        <label class="control-label col-md-2" for="MaGioiTinh">Giới t&#237;nh</label> 
        <div class="col-md-10"> 
         <select class="form-control" id="MaGioiTinh" name="MaGioiTinh"><option value="False">Nữ  </option> 
<option value="True">Nam  </option> 
</select> 
         <span class="field-validation-valid text-danger" data-valmsg-for="MaGioiTinh" data-valmsg-replace="true"></span> 
        </div> 
       </div> 
      </div> 
      </div> 
      <div id="tabs-2"> 
       <div class="form-group"> 
        <div class="col-md-offset-2 col-md-10"> 
         <textarea cols="20" id="editor1" name="editor1" rows="2"> 
</textarea> 
        </div> 
       </div> 
      </div> 

     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Create" class="btn btn-default" /> 

      </div> 
     </div> 
</form> 
<div> 
    <a href="/BeTacGia">Back to List</a> 
</div> 

     </div> 
     <!-- /#page-wrapper --> 
    </div> 
    <!-- /#wrapper --> 
    <!-- jQuery --> 

    <!-- Bootstrap Core JavaScript --> 



    <!-- Metis Menu Plugin JavaScript --> 

    <!-- Custom Theme JavaScript --> 
    <script src="../dist/js/sb-admin-2.js"></script> 
    <script type="text/javascript"> 
     $("#editor1").ckeditor(); 
    </script> 
    <script src="/ckeditor/ckeditor.js"></script> 

<!-- Visual Studio Browser Link --> 
<script type="application/json" id="__browserLink_initializationData"> 
    {"appName":"Chrome","requestId":"a0659a041f2c43debc9047700eda9c38"} 
</script> 
<script type="text/javascript" src="http://localhost:51010/3ea56a66c2ef4b65975354424aa8f008/browserLink" async="async"></script> 
<!-- End Browser Link --> 

</body> 
</html> 

回答

1

感谢您的编辑,现在是一个更加清楚一点。这太长了,无法评论。

这里的一些事情你可能想看看

  • 你有$('#editor1').ckeditor(); 2次,除去第一
  • 你有<script src="/ckeditor/ckeditor.js"></script> 3次,除去第二和第三
  • 更换第2 $('#editor1').ckeditor();CKEDITOR.replace('editor1');

您使用的是CKE jQuery适配器还是您想出了类似jQuery的选择或在你自己或..?你的浏览器开发控制台有任何错误吗?

+0

我加了输出 – Andiana

+0

@verdana更新了回答:) – Nenotlep