View on GitHub

Wysiwyg-editor

An all HTML, CSS, & JavaScript HTML5 WYSIWYG Editor

Download this project as a .zip file Download this project as a tar.gz file

HTML5 WYSIWYG-Editor

An all HTML, CSS, & JavaScript HTML5 WYSIWYG Editor
Uses <menu type="context"> and contenteditable to write HTML

Requirements

Firefox or ~~Chrome~~ (IE = )
document.execCommand support
SVG, including <use>

Features

WYSIWYG Editor written in HTML & JavaScript using execCommand
Offline access using ApplicationCache
Full-Screen editing
Drag-n-Drop images to add them (base64 encoded data-URI)
Drag-n-Drop HTML files to import (currently overwrites existing content)
Save and restore work using localStorage
Save work as file using download attribute

Contributing

Helpful Tools

GitHub Atom
Firefox Developer Edition
Myth -- CSS preprocessor using pure CSS
Node.js -- Required for Myth

Installation

From source using Git
1. Fork from GitHub

cd {/path/to/clone/to}
git clone git://github.com/{your-username}/WYSIWYG-Editor.git
cd WYSIWYG-Editor
git submodule init
git submodule update

Edit, stage, commit, push
Send pull request ### Editing Stylesheets

Rather than use LESS, SASS, or whatever the "cool kids" are doing these days, I decided to use @import along with --css-vars

Requires

Firefox
Myth
Node.js
Comment out stylesheets/css/style.css and uncomment stylesheets/css/import.css

To update style.css

myth -c stylesheets/css/import.css stylesheets/css/style.css

Editing JavaScript

I have written a bash script for concatenating .js files.
You may either set executable permissions and run it from a GUI or execute it from command line with

bash scripts/combine.bash

You will have to comment out scripts/combined.js and uncomment all of the rest of the <script> tags.