Using Medium Editor as Input Field in Rails
Medium Editor is seriously a stunning WYSIWYG editor. Simple, stylish, easy to use… But you can also use it as an input field, with some Javascript magic :)
First off, you must include JS and CSS files of Medium Editor. It doesn’t matter if you use from CDN or local folders.
https://github.com/daviferreira/medium-editor
I’m using it in a form partial (one of my current projects).
=stylesheet_link_tag 'medium-editor.css'
=javascript_include_tag 'medium-editor'
= form_for @post do |f|
= f.hidden_field :body, html: { id: "body" }
.editable { data: { field: { id: "body" } } }
= f.submit
=javascript_include_tag 'input-field'
Normally you can just add .editable
class on any element you like but you can’t do it for an input field. What I’ve done is, I just created my input field as hidden and a editable div with data-field-id is `body.
IDs of input field and editable field must be same, so we can create a polymorphic system for synchronization. Let’s get to the input-field.js file.
var editor = new MediumEditor('.editable');
$('.editable').bind('input propertychange', function() {
$("#post_" + $(this).attr("data-field-id")).val($(this).html());
});
When you create a MediumEditor object with .editable class, all elements (except input fields) with
.editable` class will turn into Medium Editor.
Real magic we’ll use is bind
method of HTML elements. (Also I must warn you that you must include standard jQuery libraries). When a editable class element is changed, inner code of bind method will run. This way we’ll get the editable element’s data-field-id and concatenate it with #post_
string.
Then we set the value of #post_element
with editable class element’s inner HTML. If you keep the names of hidden element and editable section same, you get a polymorphic synchronization. So you can use multiple Medium Editor input fields.