Ace code editor
Editors /editors/ace/
Overview

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project. Main features:

  • Syntax highlighting for over 110 languages (TextMate/Sublime Text.tmlanguage files can be imported)
  • Over 20 themes (TextMate/Sublime Text .tmtheme files can be imported)
  • Automatic indent and outdent
  • An optional command line
  • Handles huge documents (four million lines seems to be the limit!)
  • Fully customizable key bindings including vim and Emacs modes
  • Search and replace with regular expressions
  • Highlight matching parentheses
  • Toggle between soft tabs and real tabs
  • Displays hidden characters
  • Drag and drop text using the mouse
  • Line wrapping
  • Code folding
  • Multiple cursors and selections
  • Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)
  • Cut, copy, and paste functionality
Usage

Ace can be easily embedded into any existing web page. You can either use one of pre-packaged versions of ace (just copy one of src* subdirectories somewhere into your project), or use requireJS to load contents of lib/ace as ace. By default the editor only supports plain text mode; many other languages are available as separate modules.

Basic markup is:

<!-- Basic markup-->
<div id="html_editor">

	<!-- Default panel -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<h5 class="panel-title">
				Panel title
				<span class="text-semibold">Default</span>
				<small>Full featured toolbar</small>
			</h5>
		</div>

		<div class="panel-body">
			Panel body
		</div>
	</div>
	<!-- /default panel -->

</div>

Initialize via JavaScript:

// HTML editor
var html_editor = ace.edit("html_editor");
    html_editor.setTheme("ace/theme/monokai");
    html_editor.getSession().setMode("ace/mode/html");
    html_editor.setShowPrintMargin(false);
Plugin info
Property Description
File name ace.js, [modes, extensions, themes]
Location assets/js/plugins/editors/ace/
Updates 0
Links

Official plugin website

Google Group

Github project page
Summernote editor
Editors summernote.min.js
Overview

Summernote is a JavaScript library that helps you create WYSIWYG editors online. The editor uses open source libraries - jQuery and Bootstrap. Font Awesome was required as well, but i've replaced it with Icomoon icon set. Summernote editor supports keyboard shortcuts, full list you can find in demos by clicking "Help" toolbar button. Summernote has a few special features:

  • Paste images from clipboard
  • Saves images directly in the content of the field using base64 encoding, so you don't need to implement image handling at all
  • Simple UI
  • Interactive WYSIWYG editing
  • Handy integration with server
Usage

Usage is pretty simple. First include main JS file and Uniform plugin. Uniform is needed to style checkboxes and file inputs inside modal dialogs:

<!-- JS file path -->
<script type="text/javascript" src="assets/js/plugins/editors/summernote/summernote.min.js"></script>

<!-- Uniform plugin file path -->
<script type="text/javascript" src="assets/js/plugins/forms/styling/uniform.min.js"></script>

Then place a div tag somewhere in the body tag. This element will be replaced with the summernote editor:

<!-- Target element -->
<div id="summernote">Hello Summernote</div>

Finally, run this script after the DOM is ready:

// Initialize plugin
$(document).ready(function() {
	$('#summernote').summernote();
});
Custom toolbar

Summernote allows you to make own custom toolbar. To create one, use toolbar option:

// Font style only toolbar
$('.summernote').summernote({
  toolbar: [
    //[groupname, [button list]]
     
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
  ]
});

You can compose a toolbar with pre-shipped buttons:

Category Button id Function
Insert picture Insert a picture
link Insert a hyperlink
video Insert a video
table Insert a table
hr Insert a horizontal rule
Style style Format selected block
fontname Set font family
fontsize Set font size
color Set foreground and background color
bold Toggle weight
italic Toggle italic
underline Toggle underline
strikethrough Toggle strikethrough
clear Clearing all styles
Layout ul Make an un-ordered list
ol Make an ordered list
paragraph Set text alignment
height Set height of text
Misc fullscreen Toggle fullscreen editing mode
codeview Toggle wysiwyg and html editing mode
undo Undo
redo Redo
help Show help dialog
API reference

Usage is pretty simple. First include main JS file and Uniform plugin. Uniform is needed to style checkboxes and file inputs inside modal dialogs:

code - get the HTML source code underlying the text in the editor:

// Summernote API
var sHTML = $('#summernote').code();

Destroy Summernote:

// Destroy editor
$('#summernote').destroy();

Note: Full Summernote API can be found on official API documentation pages.

Plugin info
Property Description
File name summernote.min.js
Location assets/js/plugins/editors/summernote/
Updates 0
Links

Official plugin website

Full documentation

Demonstration

Github project page
WYSIHTML5
Editors /editors/wysihtml5/
Overview

WYSIHTML5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles. The code is completely library agnostic: No jQuery, Prototype or similar is required. Main editor features:

  • Auto linking of urls as-you-type
  • Generates valid and semantic HTML5 markup (no <font>)
  • Uses class-names instead of inline styles
  • Unifies line-break handling across browsers (hitting enter will create <br> instead of <p> or <div>)
  • Auto-parses content inserted via copy & paste (from Word, Powerpoint, PDF, other web pages, …)
  • Converts invalid or unknown html tags into valid/similar tags
  • Source code view for users with HTML skills
  • Uses sandboxed iframes in order to prevent identity theft through XSS
  • Editor inherits styles and attributes (placeholder, autofocus, …) from original textarea (you only have to style one element)
  • Speech-input for Chrome
Usage

Just like in Bootstrap you can activate it without any JavaScript, just by adding a data-attribute, you can make it automatically work. Add data-hover="dropdown" in addition (or in place of) Bootstrap's data-toggle="dropdown". You can set options via data-attributes, too, via data-delay and data-close-others.

1. The first editor script contains the html5 parser rules that are needed for wysihtml5 in order to create valid and desired markup. The second script is the minified wysihtml5 library. Toolbar is placed inside separate file. Also Uniform plugin is added for nice looking checkboxes and file inputs in modal dialogs. Ordering matters:

<!-- Include Uniform plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/styling/uniform.min.js"></script>

<!-- Include minified library -->
<script type="text/javascript" src="assets/js/plugins/editors/wysihtml5/wysihtml5.min.js"></script>

<!-- Include toolbar -->
<script type="text/javascript" src="assets/js/plugins/editors/wysihtml5/toolbar.js"></script>

<!-- Include parser rules -->
<script type="text/javascript" src="assets/js/plugins/editors/wysihtml5/parsers.js"></script>

2. WYSIHTML5 takes a textarea and transforms it into a rich text editor. The textarea acts as a fallback for unsupported browsers (eg. IE < 8). Make sure the textarea element has an id, so we can later access it easily from javascript. The resulting rich text editor will much behave and look like the textarea since behavior (placeholder, autofocus, ...) and css styles will be copied over. Please note: The textarea will always hold the editor's generated markup. Therefore wysihtml5 integrates smoothly with forms.

<!-- Create textarea -->
<form action="#">
	<div class="form-group">
		<textarea id="wysihtml5-textarea" placeholder="Enter your text ..."></textarea>
	</div>
</form>

3. And initialize plugin. Make sure you place the <script> at the end of the document, before the </body> tag because the document must be loaded before running the script. Or, test if document is loaded (i.e. jQuery's $(document).ready()) and initialize the editor aferwards.

// Initialize editor
$('.wysihtml5-default').wysihtml5({
    parserRules:  wysihtml5ParserRules
});
Options

Following is a list of all configuration parameters with their corresponding default values:

Option Value Description
name null Give the editor a name, the name will also be set as class name on the iframe and on the iframe's body
style true Whether the editor should look like the textarea (by adopting styles)
toolbar null Id of the toolbar element or DOM node, pass false value if you don't want any toolbar logic
autoLink null Whether urls, entered by the user should automatically become clickable-links
parserRules { tags: { br: {}, span: {}, div: {}, p: {} }, classes: {} } Object which includes parser rules to apply when html gets inserted via copy & paste
parser wysihtml5.dom.parse Parser method to use when the user inserts content via copy & paste
composerClassName "wysihtml5-editor" Class name which should be set on the contentEditable element in the created sandbox iframe, can be styled via the 'stylesheets' option
bodyClassName "wysihtml5-supported" Class name to add to the body when the wysihtml5 editor is supported
useLineBreaks true By default wysihtml5 will insert a <br> for line breaks, set this to false to use <p>
stylesheets [] Array (or single string) of stylesheet urls to be loaded in the editor's iframe
placeholderText null Placeholder text to use, defaults to the placeholder attribute on the textarea element
supportTouchDevices true Whether the rich text editor should be rendered on touch devices (wysihtml5 >= 0.3.0 comes with basic support for iOS 5)
cleanUp true Whether senseless <span> elements (empty or without attributes) should be removed/replaced with their content
Plugin info
Property Description
File name summernote.min.js
Location assets/js/plugins/editors/summernote/
Updates 0
Links

Official plugin website

Full documentation

Github project page