EditableComponents for Rails
A Ruby on Rails plugin to manage UI components editable from the front-end.
NOTE: this is an ALPHA version, major changes could happens.
Goals:
attach the necessary data to a model transparently
edit the UI contents directly from the pages
simplify the components development in views
Instructions
Add to the Gemfile:
gem 'editable_components'
Copy migrations (Rails 5.x syntax, in Rails 4.x use rake):
rails editable_components:install:migrations
Apply them:
rake db:migrate
Include the concern Editable to your model:
include EditableComponents::Concerns::Editable
Add to your application layout (in head, ex. using ERB):
<%= stylesheet_link_tag( EditableComponents::Engine.css ) if EditableComponents::Engine.css %>
Add to your application layout (before body closing):
<%= javascript_include_tag( EditableComponents::Engine.js ) if EditableComponents::Engine.js %>
Add your blocks to the views (ex. in show):
<%= render layout: 'editable_components/blocks', locals: { container: @page } do |blocks| %> <% blocks.each do |block| %> <%= render partial: "editable_components/block", locals: { block: block } %> <% end %> <% end %>
Add some sample data (ex. Page model):
Page.first.create_block :text
Images
To add support for images add CarrierWave gem to your Gemfile and execute: rails generate uploader File
Notes
- This is not a complete replacement for an admin interface but it could improve the usability of a CMS software or content editor
Dev Notes
Structure
Including the Editable concern to a model will add
has_many :ec_blocks
relationship (the list of blocks attached to a container) and some utility methodsBlock: an editable UI component (ex. a text with a title, a slider, a 3 column text widgets, etc.); built with a list of sub blocks (for nested components) and a list of items
Item: a single piece of information (ex. a string, a text, a boolean, an integer, a file, etc.)
The live editing interface uses VueJS
Contributors
- Mattia Roccoberton - creator, maintainer