https://github.com/roydejong/midway-editor
A WYSIWYG Editor: Simple, lightweight, inspired by Medium
https://github.com/roydejong/midway-editor
contenteditable editor html5 javascript medium wysiwyg
Last synced: 15 days ago
JSON representation
A WYSIWYG Editor: Simple, lightweight, inspired by Medium
- Host: GitHub
- URL: https://github.com/roydejong/midway-editor
- Owner: roydejong
- License: mit
- Created: 2017-01-30T00:01:53.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-03T18:48:51.000Z (over 9 years ago)
- Last Synced: 2025-11-11T16:26:39.508Z (7 months ago)
- Topics: contenteditable, editor, html5, javascript, medium, wysiwyg
- Language: JavaScript
- Size: 110 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# midway-editor
**A WYSIWYG Editor: Simple and lightweight. Inspired by Medium's brilliant post editor.**
**[View demo page](https://roydejong.github.io/midway-editor/)**
(For the record: this little project just for fun and learning. There are probably [better](https://github.com/yabwe/medium-editor) alternatives out there :grin:. This has only been tested on Chrome so far.)
## What it does
It turns an element on your page onto a fully featured post editor.
#### Current features
- Suitable for new post creation, or making an existing post editable.
- Enforces post semantics with an `
` 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.
:ok_hand: An up-to-date list of features being worked in is available in the [Issue tracker](https://github.com/roydejong/midway-editor/issues).
## Setup
#### Prerequisites
Midway Editor uses jQuery, so be sure to include it in your page if you haven't already.
#### Install Midway
First, download a ZIP of **[the latest version](https://github.com/roydejong/midway-editor/archive/master.zip)** 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:
#### Enabling the editor
Check out the demo page (`index.html`) for an example.
Here's a very basic example of how the editor can be enabled:
My post title
My post content
$(document).ready(function () {
Midway.edit('.midway-edit');
});
## Development
#### Prerequisites
This project uses Grunt to bundle and minify the JavaScript source code into the distributable files. To install Grunt:
1. [Install Node.js](https://nodejs.org/en/download/) on your OS.
2. Install the Grunt CLI: `npm install -g grunt-cli`.
3. 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:
1. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/) runtime on your OS.
2. Install the Sass gem: `gem install sass`
#### Compiling the project
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.