WYMeditor extension for Refinery CMS
HTML JavaScript CSS Ruby
Failed to load latest commit information.
app Add config switch for paste dialogue. Aug 15, 2016
bin Get set up for testing this extension properly. Dec 12, 2014
lib Now use extend instead include engine Aug 31, 2017
public/wymeditor Attempted to extract the wymeditor coupling from Refinery CMS Mar 22, 2014
spec Now use google chrome with selenium and fix travis config Aug 31, 2017
tasks Update specs Jun 14, 2016
.gitignore Added selenium-webdriver as a testing dependency, ignored Gemfile.lock Dec 12, 2014
.travis.yml Now use google chrome with selenium and fix travis config Aug 31, 2017
Gemfile Now use google chrome with selenium and fix travis config Aug 31, 2017
Rakefile Update specs Jun 14, 2016
refinerycms-wymeditor.gemspec Bump version to 2.0.0 Aug 31, 2017


Refinery CMS WYMeditor (the visual editor)

Build Status

Refinery CMS is backed by WYMeditor

It's a standards compliant editor that we've trimmed to only have what we feel is absolutely necessary. When you're editing the content in a page part you're using WYMeditor.

We have since modified the source code of WYMeditor to allow for a lot of new features like our custom dialogues however it is all based on the release: WYMeditor 0.5 rc1.

You can also switch to "source" view and edit HTML manually if the visual editor is not playing nice.


Simply put this in the Gemfile of your Refinery application:

gem 'refinerycms-wymeditor', ['~> 2.0', '>= 2.0.0']

Now, run bundle install

Next, to install the WYMeditor extension run:

rails generate refinery:wymeditor

Custom Selectable Styles in WYMeditor

Some sites require a little more than just your standard bold and heading controls. This is where the "css" style drop down comes in handy.

It allows your users to select a style you define. You need to edit/create a CSS file called theme.css.

This file should be located in /public/stylesheets/themes.css

Inside that file you define your styles like this

.category-name-style-name {
  // apply your CSS rules here

For example, if I wanted to add a style that allowed my users to highlight their text a light yellow colour, I would put this

.text-highlight-yellow {
  background: LightYellow;

Now edit public/javascripts/admin.js. We're going to need to tell WYMeditor that we have some new styles it should load when the editor is loaded.

Currently your admin.js file will have something like this

var custom_visual_editor_boot_options = {


If we open public/javascripts/boot_wym.js we might see the default inside:

, classesItems: [
  {name: 'text-align', rules:['left', 'center', 'right', 'justify'], join: '-'}
  , {name: 'image-align', rules:['left', 'right'], join: '-'}
  , {name: 'font-size', rules:['small', 'normal', 'large'], join: '-'}

Let's just breakdown a single WYMeditor line and understand it:

{name: 'font-size', rules:['small','normal','large'], join: '-'}

font-size is the name of the category and small, normal, large are the actual styles. So for this to match up with the styles in my theme.css file the class name has to be:

.font-size-small { // CSS rules here }
.font-size-normal { // CSS rules here }
.font-size-large { // CSS rules here }

So going back to our text highlighting style above, we make the new style show up in the editor by changing our admin.js file to:

var custom_visual_editor_boot_options = {
  classesItems: [
    {name: 'text-align', rules:['left', 'center', 'right', 'justify'], join: '-'}
    , {name: 'image-align', rules:['left', 'right'], join: '-'}
    , {name: 'font-size', rules:['small','normal','large'], join: '-'}
    , {name: 'text-highlight', rules:['yellow'], join: '-'}

Dialogs that show from WYMeditor

Page Link dialog

The link dialog lets you link in several different ways:

  • To an internal page
  • To an external page
  • To an email address
  • To a resource you've uploaded in the Resources tab.

Insert Image dialog

Simply lets you select from an existing image found in the Images tab or upload a new one right within the dialog.