2013-10-27 53 views
2

試圖做一個漂亮的CKEditor的在Rails 4應用乾淨的安裝的CKEditor +軌道4安裝

這種寶石https://github.com/tsechingho/ckeditor-rails

我有幾個問題...

-The第一,我有一種形式的CKEditor,當我訪問該表單的頁面時,它只會加載一個常規的文本輸入框。當我手動重新加載相同的頁面時,CKEditor將加載,但只有在我重新加載頁面之後。它不顯示在第一頁加載。
- 第二個是,CKEditor只是吐出原始的html。我相信這只是我的一個簡單的錯誤,但我還沒有遇到任何答案。

下面是相關的一切和每個寶石

指令的Gemfile
gem 'ckeditor_rails'

應用程序/資產/ Java腳本/ application.js中

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

應用程序/ 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. 
+0

什麼是你的代碼添加圖像。我的作品除了圖片上傳 –

+0

在你的application.us文件中,你包含了js代碼,但沒有要求自我。此外,通常建議將任何代碼分離到自己的文件中,並將其包含在application.is清單文件中。 – ahnbizcad

回答

0

對於未來的Google -

看到這個Github Issue

問題是與TurboLinks干擾。事實證明,實際的頁面加載不是問題,而是使用CKEditor表單指向頁面的鏈接。解決方法是直接從包含CKEditor所在鏈接的div中禁用turbolink。

在我的情況下的解決方案看起來是這樣的......

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