Fatal编程技术网
  • jquery/
  • Jquery 如果不重新加载页面，则编辑器工具栏按钮不会响应

Jquery 如果不重新加载页面，则编辑器工具栏按钮不会响应

jquery ruby-on-rails ckeditor

Jquery 如果不重新加载页面，则编辑器工具栏按钮不会响应,jquery,ruby-on-rails,ckeditor,turbolinks,ckeditor4.x,Jquery,Ruby On Rails,Ckeditor,Turbolinks,Ckeditor4.x,在我的rails 4.2.3应用程序中，我使用了ckeditor 4.5.3，它与ckeditor_rails gem集成 我也有TurboLink，但是已经为每个包含div和body的ckeditor元素禁用了TurboLink 它可以正常工作，但当我在一个带有ckeditor实例的页面上时，我使用浏览器按钮返回到非ckeditor页面，然后使用浏览器按钮前进到ckeditor页面，编辑器会显示，但工具栏按钮不会响应单击。我在控制台中遇到此错误： Uncaught TypeError: Can

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

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

它可以正常工作，但当我在一个带有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;
};

#文件
gem“涡轮链接”
gem'ckeditor_rails'
#application.js
//=需要ckeditor jquery
#application.html.erb
...
'true'>
document.addEventListener（“DOMContentLoaded”），函数（事件）{
event.preventDefault（）；
$（'.ckeditor'）.ckeditor({
//可选配置
});
});
...
#_form.html.erb
#assets/javascripts/ckeditor/config.js
CKEDITOR.editorConfig=函数（配置）{
//在此处定义对默认配置的更改。
//有关完整的参考资料，请参见：
// http://docs.ckeditor.com/#！/api/CKEDITOR.config
//工具栏组排列，针对两个工具栏行进行了优化。
config.toolbarGroups=[
{name:'clipboard'，组：['clipboard'，'undo']}，
{name:'编辑'，组：['查找'，'选择'，'拼写检查']}，
{name:'links'}，
{name:'插入'}，
{name:'forms'}，
{name:'tools'}，
{name:'document'，组：['mode'，'document'，'doctools']}，
{name:'其他人'}，
'/',
{name:'basicstyles'，组：['basicstyles'，'cleanup']}，
{name:'段落'，组：['list'，'indent'，'blocks'，'align'，'bidi']}，
{name:'styles'}，
{name:'colors'}，
{name:'关于'}
];
config.toolbar=[
{name:'clipboard'，项：['Cut'，'Copy'，'Paste'，'PasteText'，'PasteFromWord'，'-'，'Undo'，'Redo']}，
{name:'编辑'，项：['Scayt']}，
{name:'links'，项：['Link'，'Unlink'，'Anchor']}，
{name:'insert'，项：['Image'，'codesippet'，'Mathjax'，'Table'，'HorizontalRule'，'SpecialChar']}，
{name:'tools'，items:['Maximize']}，
{name:'document'，items:['Source']}，
'/',
{name:'basicstyles'，项：['Bold'，'Italic'，'Strike'，'-'，'RemoveFormat']}，
{name:'段落'，项目：['NumberedList'，'BulletedList'，'Outdent'，'Indent'，'Indent'，'Blockquote']，
{name:'styles'，items:['styles'，'Format']}，
{name:'about'，items:['about']}
];
//删除标准插件提供的一些按钮，这些按钮是
//标准工具栏中不需要。
config.removeButtons='下划线，下标，上标'；
//设置最常用的块元素。
config.format_标签='p；h1；h2；h3；pre'；
//简化对话框窗口。
config.removeDialogTabs='image:advanced；link:advanced'；
config.extraPlugins='codesippet，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\u BR；
config.allowedContent=true；
};
顺便说一句，我已经尝试将config.allowedContent设置为true和false-无论哪种方式，都存在相同的问题。

您想提供ckeditor的配置吗？@uzaif刚刚添加了配置文件。未来注意：cdn.mathjax.org即将结束，请查看迁移提示。