CKEditor + Rails 4 安装答案

【问题标题】：CKEditor + Rails 4 InstallationCKEditor + Rails 4 安装
【发布时间】：2013-10-27 08:18:22
【问题描述】：

尝试在 Rails 4 应用程序中干净地安装 CKEditor

这颗宝石https://github.com/tsechingho/ckeditor-rails

我有几个问题...

-首先是我在表单中有CKEditor，当我进入该表单的页面时，它只加载一个常规文本输入框。当我手动重新加载同一页面时，CKEditor 将加载，但只有在我重新加载它所在的页面之后。它不会在第一页加载时显示。
-其次，CKEditor 只吐出原始 html。我确定这只是我的一个简单错误，但我还没有找到任何答案。

这里是所有相关的和宝石的说明

宝石文件
gem 'ckeditor_rails'

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require ckeditor-jquery
//= require bootstrap
//= require turbolinks
//= require_tree .
$('.ckeditor').ckeditor({
  // optional config
});

app/views/posts/_form.html.erb

<div class="form-group">
    <%= f.label :title %>
    <%= f.text_field :title, class: "form-control" %>
</div>
  <div class="form-group">
    <%= f.label :body %>
    <%= f.text_area :body, class: "ckeditor" %>
  </div>
  <div class="form-group">
    <%= f.submit class: "btn btn-primary" %>
  </div>

这是控制台错误/警告的完整列表。一切都应该在 CKeditor 安装之后。

Invalid CSS property name: -webkit-overflow-scrolling style.css:3000
Invalid CSS property value: transform 0.3s ease-out style.css:3997
Invalid CSS property value: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0%), color-stop(rgba(0, 0, 0, 0.0001) 100%)) style.css:4331
Invalid CSS property value: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0%), color-stop(rgba(0, 0, 0, 0.5) 100%)) style.css:4340
Uncaught TypeError: Cannot call method 'appendChild' of undefined ckeditor.js?body=1:74
Uncaught The editor instance "post_body" is already attached to the provided element.

【问题讨论】：

附加图片的代码是什么。我的作品除了图片上传
在您的 application.us 文件中，您包含 js 代码，但没有 require self。此外，通常建议将任何代码分离到自己的文件中，并将其包含在 application.is 清单文件中。

标签： ruby-on-rails ckeditor

【解决方案1】：

对于未来的 Google 员工 --

看到这个Github Issue

问题在于 TurboLinks 的干扰。事实证明，实际的页面加载不是问题，而是指向带有 CKEditor 表单的页面的链接。解决方案是直接从包含 CKEditor 所在链接的 div 中禁用 turbolink。

在我的情况下，解决方案看起来像这样......

_header.html.erb
<ul class="nav navbar-nav pull-right" data-no-turbolink>

【讨论】：