wysihtml5 editor with Bootstrap 3 and SASS
JavaScript CSS Ruby
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.settings
compiled
lib
src
test
.gitignore
Gemfile
Gemfile.lock
LICENCE
README.md
Rakefile
VERSION
bower.json
index.html

README.md

Overview

Bootstrap-wysihtml5-sass is a Twitter Bootstrap 3 + Sass port of jhollingworth/bootstrap-wysihtml5.

Demo

Changelog

[Oct 30, 2013]

  • Dynamic resize. Resize iframe on image inserting, typing, deleting, pasting. Intelligently scroll to keep editor in view.
  • Dynamic menu updating. Display current block style and color in drop down menu.
  • Added dependency imagesLoaded.js

Project Goals:

  1. Provide sass files that automatically inherit bootstrap modifications
  2. Add fixes and features to bootstrap-wysihtml5

Quick Start

Rails

[1] Copy javascripts

src/bootstrap-wysihtml5.js
src/locales/*
lib/js/wysihtml5-0.4.0pre.js
lib/js/imagesloaded.js
lib/js/underscore.js
# Copy to => vendors/assets/javascripts

Note that underscore is optional. Simply replace references to _.debounce with another debounce function in bootstrap-wysihtml5.js.

[2] Copy stylesheets

src/bootstrap-wysihtml5.scss
# Copy to => vendors/assets/stylesheets

[3] Add js to assets pipleline

# app/assets/javascripts/application.coffee
#= require underscore
#= require imagesloaded
#= require wysihtml5
#= require bootstrap-wysihtml5

[4] Add css to assets pipeline

// app/assets/stylesheets/application.scss
@import "bootstrap";
@import "wysihtml5";

[5] Add wysihtml5-styles.css to production config

config.assets.precompile += %w( wysihtml5-styles.css )

[6] Initialize editor in a view

$('textarea.wysihtml5').wysihtml5({
  "stylesheets": ["#{asset_path('wysihtml5-styles.css')}"]
});

Other

Copy the following files to your project:

src/bootstrap-wysihtml5.js
src/locales/*
lib/js/wysihtml5-0.4.0pre.js
lib/js/imagesloaded.js
lib/js/underscore.js
src/bootstrap-wysihtml5.scss
src/wysihtml5-styles.scss

Compile sass files as needed or use precompiled versions in /compiled/.

Initialize the editor:

$('textarea.wysihtml5').wysihtml5({
  "stylesheets": ["/path/to/wysihtml5-styles.css"]
});

Options

An options object can be passed in to .wysihtml5() to configure the editor:

$('#some-textarea').wysihtml5({someOption: 23, ...})

Buttons

To override which buttons to show, set the appropriate flags:

$('#some-textarea').wysihtml5({
	"font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
	"emphasis": true, //Italics, bold, etc. Default true
	"lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
	"html": false, //Button which allows you to edit the generated HTML. Default false
	"link": true, //Button to insert a link. Default true
	"image": true, //Button to insert an image. Default true,
	"color": false //Button to change color of font
});

Stylesheets

To provide a stylesheet to the editor iframe, set the stylesheets config option.

$('#some-textarea').wysihtml5({
	"stylesheets": ["/path/to/editor.css"]
});

Documentation

See jhollingworth/bootstrap-wysihtml5 and xing/wsysihtml5 for additional documentation.