Question

在我的rails 4.2.3应用程序中，我使用ckeditor 4.5.3，使用ckeditor_rails gem集成。

我也有turbolinks，但已经为每个ckeditor元素禁用了turbolinks，包含div和body。

它工作正常，但是当我在一个带有ckeditor实例的页面上，并且我使用浏览器按钮返回到非ckeditor页面时，然后使用浏览器按钮进入ckeditor页面，编辑器显示，但工具栏按钮不响应点击。我在控制台中收到此错误：

Uncaught TypeError: Cannot read property 'getSelection' of undefined

刷新ckeditor页面使工具栏按钮有效。

以下是我与ckeditor和turbolinks的相关代码：

# Gemfile
gem 'turbolinks'
gem 'ckeditor_rails'

# application.js
//= require ckeditor-jquery

# application.html.erb
<head>
  ...
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_include_tag 'application', "data-turbolinks-track" => 'true' %>
  <script>
    document.addEventListener("DOMContentLoaded", function (event) {
      event.preventDefault();
      $('.ckeditor').ckeditor({
        // optional config
      });
    });
  </script>
</head>
<% if current_page?(action: 'new') || current_page?(action: 'edit') %>
  <body data-turbolinks='false' data-no-turbolink>
<% else %>
  <body>
<% end %>
...
</body>

# _form.html.erb
<div class='form-group' data-turbolinks='false' data-no-turbolink>
    <%= f.label :description %>
    <%= f.text_area :description, class: 'form-control ckeditor', data: {turbolinks: false, no_turbolink: true} %>
</div>

# assets/javascripts/ckeditor/config.js
CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

  config.toolbar = [
        { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
        { name: 'editing', items: [ 'Scayt' ] },
        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
        { name: 'insert', items: [ 'Image', 'CodeSnippet', 'Mathjax', 'Table', 'HorizontalRule', 'SpecialChar' ] },
        { name: 'tools', items: [ 'Maximize' ] },
        { name: 'document', items: [ 'Source' ] },
        '/',
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
        { name: 'styles', items: [ 'Styles', 'Format' ] },
        { name: 'about', items: [ 'About' ] }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';

  config.extraPlugins = 'codesnippet,mathjax,widget,lineutils';

  config.language = 'en';
  config.language_list = [ 'en:English'];
  config.mathJaxLib = '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML';

  config.enterMode = CKEDITOR.ENTER_BR;

  config.allowedContent = true;
};

BTW，我试过将config.allowedContent设置为true和false - 无论哪种方式，都存在同样的问题。

没有页面重新加载，ckeditor工具栏按钮不响应

0 个答案: