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

• Add to the Gemfile:

gem 'amoeba'
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 to routes: mount EditableComponents::Engine => '/components'

• Add to your controller (ex. in show method): EditableComponents::Engine.edit_mode = !params[:preview]

• 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

Edit the conf file: config/initializers/editable_components.rb

conf = EditableComponents.config
# Adds a new custom block
conf[:ec_blocks][:custom] = {
  name: 'Custom block',
  items: {
    int1: :item_integer,
    int2: :item_integer,
    a_float: :item_float
  }
}
EditableComponents.config( { components: conf[:ec_blocks] } )

Create the new view blocks: app/views/editable_components/_block_custom.html.erb

<% if local_assigns[:block] %>
  <% block = local_assigns[:block] %>
  <div <%= block.editable %>>
    1st number: <span class="num1"<%= block.props.integers[0].editable %>><%= block.props.integers[0] %></span>
    - 2nd number: <span class="num2"<%= block.props.integers[1].editable %>><%= block.props.integers[1] %></span><br/>
    A float: <span <%= block.props.float.editable %>><%= block.props.float %></span><br/>
  </div>
<% end %>

To add support for images add CarrierWave gem to your Gemfile and execute: rails generate uploader File

To create a "free form" block just use: Page.first.create_block :intro, name: 'IntroBlock', schema: { intro: :item_string, subtitle: :item_string }

• This is not a complete replacement for an admin interface but it could improve the usability of a CMS software or content editor

• 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 methods

• Block: 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

• Mattia Roccoberton - creator, maintainer