Question

我正在尝试在我的应用程序中使用CKEditor。我已正确配置它，它看起来很好。但是当我尝试添加插件时，它会导致编辑器窗口失去所有功能，变成一个很大的空白div。

以下是托管编辑器的html页面的代码：

      def update
    @person = Person.find params[:id]
    if @person.update_attributes params[:person]
      format.html { redirect_to @person, notice: 'Person was shot and stabbed' }
      format.json { render :show, status: :ok, location: @person }
    end
    respond_to do |format|
      if @person.update(person_params)
        format.html { redirect_to @person, notice: 'Person was successfully updated.' }
        format.json { render :show, status: :ok, location: @person }
      else
        format.html { render :edit }
        format.json { render json: @person.errors, status: :unprocessable_entity }
      end
    end
  end

这是我的<!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>Shahmukhi - Reviving Local Languages of Pakistan</title>  <link href="/js/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">  <link href="/js/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">  <link href="/js/dist/css/timeline.css" rel="stylesheet">  <link href="/js/dist/css/sb-admin-2.css" rel="stylesheet">  <link href="/js/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">     <script src="/js/bower_components/jquery/dist/jquery.min.js"></script>  <script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>  <script src="/js/bower_components/metisMenu/dist/metisMenu.min.js"></script>  <script src="/js/dist/js/sb-admin-2.js"></script>  <script src="//cdn.ckeditor.com/4.4.7/full-all/ckeditor.js"></script>  </head> <body style="margin: 0px;"> <div id="wrapper">  <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 href="#"><img src="/images/phoenix.png" style="width: 364px; height: 50px;" /></a> </div>  <ul class="nav navbar-top-links navbar-right"> <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 class="text-center" href="#"> <strong>No New Alerts</strong>  </a> </li> </ul>  </li>  <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>  </li>  </ul>  <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>  </li> <li> <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Home</a> </li> <li> <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> My Documents<span class="fa arrow"></span></a> </li> <li> <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Exports<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="flot.html">Facebook</a> </li> <li> <a href="morris.html">PDF</a> </li> </ul>  </li> <li> <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Settings<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="flot.html">Account</a> </li> <li> <a href="flot.html">Google Drive</a> </li> <li> <a href="morris.html">Facebook Account</a> </li> </ul>  </li> </ul> </div>  </div>  </nav> <div id="page-wrapper" style="padding-top: 30px;"> <textarea name="editor1"></textarea> <div id="root"></div> <script> CKEDITOR.plugins.addExternal( 'urdu', '/ckeditor/plugins/urdu/plugin.js', '' ); CKEDITOR.replace('editor1', { contentsLangDirection: 'rtl', contentsCss: ['/fonts/fonts.css', '/dist/css/contents.css'], font_names: 'Jameel Noori Nastaleeq; Nafees Pakistani Naskh; Times New Roman;', font_defaultLabel: 'Jameel Noori Nastaleeq', fontSize_defaultLabel: '18px', uiColor: '#F8F8F8', height: '350px', toolbarGroups: [ {"name":"basicstyles","groups":["basicstyles"]}, {"name":"links","groups":["links"]}, {"name":"paragraph","groups":["list","blocks"]}, {"name":"document","groups":["mode"]}, {"name":"insert","groups":["insert"]}, {"name":"styles","groups":["styles"]} ], // Remove the redundant buttons from toolbar groups defined above. removeButtons: 'Underline,Strike,Subscript,Save,Flash,Superscript,Anchor,Styles,Specialchar', plugins: 'urdu' }); </script> <script type="text/javascript" src="/dist/js/keyboard-bundle.js"></script> </div>  </div>  <iframe src="/phoenix/live_reload/frame" style="display: none;"></iframe> </body> </html>插件中的代码：

urdu

在CKEDITOR.plugins.add('urdu', { icons: 'togglelanguage', init: function (editor) { } });行注释掉后，页面看起来很像：

并在添加插件后，它变成如下：

Answer 1

您混淆了两个配置选项：config.plugins和config.extraPlugins。

因此，您从编辑器配置中删除了除urdu之外的所有插件 - 因此编辑器无法工作。

插件删除所有编辑器功能

1 个答案: