thoughtbot / administrate

A Rails engine that helps you put together a super-flexible admin dashboard.
http://administrate-demo.herokuapp.com
MIT License
5.9k stars 1.12k forks source link

custom field and ckeditor #342

Closed masciugo closed 8 years ago

masciugo commented 8 years ago

thanks to #326 (wonderful) I was able to add ckeditor in a custom field this way:

#/app/views/fields/html_field/_form.html.erb
<%= f.label field.attribute %>
<%= f.cktext_area field.attribute, :ckeditor => {:toolbar => 'super_mini'} %>

I was not able to find a way to prevent the editor from overlapping the label: screen shot 2015-12-15 at 18 16 52 I know it's not very related to administrate which is moreover under heavy development but I thought my problem might be of general interest. Thanks a lot

c-lliope commented 8 years ago

hm... that's interesting. I'm not able to look into this yet, but let me know if you figure out the problem! A CKEditor plugin would be a great addition after we figure out #123.

rikkipitt commented 8 years ago

I built a ckeditor plugin a long while ago and encountered this. I forget why it happens, but I can look into it soon.

masciugo commented 8 years ago

@rikkipitt thank you!

taylorscollon commented 8 years ago

@masciugo did you have to do anything else to get your ckeditor working? I got a paperclip field working, and replicated that setup along with your _form.html.erb partial but no luck. I end up with a div with a class of 'form-field--ck-editor-field' but no toolbar.

joshnolan commented 8 years ago

It has to do with the CKEditor generated HTML code. If you wrap the CKEditor in a DIV and do the following the layout will be fixed (same issue occurred when using ActiveAdmin)

<%= f.label field.attribute %>
<div style='display:table; margin-bottom: 20px;'>
<%= f.cktext_area field.attribute, :ckeditor => {:toolbar => 'super_mini'} %>
</div>
masciugo commented 8 years ago

@joshnolan thank you, it works. I had tried to wrap it in a DIV but without applying the display:table; style which actually does the trick. Does it have an easy explanation? thanks again

macowie commented 8 years ago

For reference, I always use this rule to fix this issue

.cke_chrome {
  overflow: hidden;
}
c-lliope commented 8 years ago

@masciugo - We're starting to extract custom fields into separate gems - if you'd like to do that for this plugin, you should check out #476 as a starting point.

c-lliope commented 8 years ago

@masciugo - we just released version 0.2.0, which supports plugins! Feel free to create your own administrate-field-ckeditor gem and share it with the world!

The administrate-field-image gem at https://github.com/graysonwright/administrate-field-image is a good starting place – that repository demonstrates the file structure that Administrate requires for plugins.

After you've built your plugin, let me know where it lives (on GitHub and on rubygems.org) so I can share it with others.

Happy developing!

rikkipitt commented 8 years ago

As mentioned in #123, using the new plugin structure, I've created a ckeditor plugin for Administrate:

https://github.com/jemcode/administrate-field-ckeditor https://rubygems.org/gems/administrate-field-ckeditor

Let me know what you guys think, there is much scope for adding in custom ckeditor config.js support etc! Pull requests much appreciated!

Rikki