Rails 4 how to set up ckeditor 4.1
I will not use CKEditor in my Rails application.
in my gemfile I added this line
gem 'ckeditor', :git => 'https://github.com/galetahub/ckeditor.git'
after running "package update" and "rails generate ckeditor: install --orm = active_record --backend = paperclip" I add this line to my application.js:
//= require ckeditor/init
in my opinion i added this line:
<%= f.cktext_area :img, :ckeditor => {:toolbar => 'img', :customConfig => asset_path('ckeditor/config.js')} %>
I created these folders and files:
/app/assets/javascripts/ckeditor /app/assets/javascripts/ckeditor/config.js /app/assets/javascripts/ckeditor/contents.css
My config.js looks like this:
CKEDITOR.editorConfig = function( config )
{
config.toolbar_img = [
{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },
]
}
Why does my editor look like this?
source to share
Modify your config.js file as follows:
CKEDITOR.config.toolbar= [
{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }
];
Make sure you need a config.js file in your application.js file:
//= require ckeditor/init
//= require_tree ./ckeditor
Also, the CSS file should be here: /app/assets/stylesheets/ckeditor/contents.css not here /app/assets/javascripts/ckeditor/contents.css
After executing the above-mentioned changes, you can simply do: <%= f.cktext_area :img %>
.
However, if you want to pass configuration values to text_area directly, then something like this should do:
<%= f.cktext_area :img, :ckeditor => {:toolbar => 'mini'} %>
or
<%= f.cktext_area :img, :ckeditor => {:toolbar => {'name' => 'document', 'items' => ['Source']} } %>
source to share
In sight:
<%= k.cktext_area :template_text, required: true, :class =>"emailBodyTemplate", :id => "emailBodyText", placeholder: "Email Body Text", :maxlength => 255 %>
In app / assets / javascripts / ckeditor / config.js:
CKEDITOR.editorConfig = function (config) {
config.toolbar_mini = [
["Bold", "Italic", "Underline", "Strike", "-"],
['BulletedList','NumberedList' ],['Outdent','Indent'],
];
config.toolbar = "mini";
config.toolbarLocation = 'bottom';
config.height = 280;
config.width = 620;
config.removePlugins = 'elementspath';config.removePlugins = 'elementspath';
}
Output: