A WYSIWYG Editor: Simple and lightweight. Inspired by Medium's brilliant post editor.
(For the record: this little project just for fun and learning. There are probably better alternatives out there 😁. This has only been tested on Chrome so far.)
It turns an element on your page onto a fully featured post editor.
- Suitable for new post creation, or making an existing post editable.
- Enforces post semantics with an
<h1>
title above the body. - Features a basic text formatting toolbar which opens after selecting text (bold, italics, headings, blockquote).
- Link insertion and removal via the toolbar.
👌 An up-to-date list of features being worked in is available in the Issue tracker.
Midway Editor uses jQuery, so be sure to include it in your page if you haven't already.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
First, download a ZIP of the latest version of this repository. You'll find production ready files in the included dist
directory.
To use Midway, you need to include the library as well as some required CSS:
<link rel="stylesheet" href="dist/css/midway-toolbar.css">
<script src="dist/midway-editor.min.js"></script>
Check out the demo page (index.html
) for an example.
Here's a very basic example of how the editor can be enabled:
<div class="midway-edit">
<h1>My post title</h1>
<p>My post content</p>
</div>
<script>
$(document).ready(function () {
Midway.edit('.midway-edit');
});
</script>
This project uses Grunt to bundle and minify the JavaScript source code into the distributable files. To install Grunt:
- Install Node.js on your OS.
- Install the Grunt CLI:
npm install -g grunt-cli
. - From the project directory, install the npm dependencies:
npm install
.
You'll also need Sass if you want to compile the SCSS file. To install Sass:
- Install Ruby runtime on your OS.
- Install the Sass gem:
gem install sass
From the project directory, run grunt
to bundle and minify the JavaScript into the dist
directory.
To generate the *.css
files, run scss --update scss:dist/css
.
To ease development, set up a file watcher in your IDE of choice to automate these tasks.