Cazary NPM | npm.io

Cazary

jQuery plugin of WYSIWYG editor that aims for fast, lightweight, stylish, customizable, cross-browser, and multi-language.

jQuery version

1.7+ (cazary.js)
1.2.4+ (cazary-legacy.js)

Supported browsers

Internet Explorer: 8 or later
Mozilla Firefox: Latest version
Google Chrome: Latest version
Opera: version 12(Presto based), 15(Blink based)
Safari for Windows: version 5
Safari for Mac: Latest version

Supported Languages

How to use

Traditional method

Copy dist to public directory
Load the theme CSS

<link rel="stylesheet" type="text/css" href="dist/themes/flat/style.css" />

Load jQuery and cazary.min.js

<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="dist/cazary.min.js"></script>

Write JavaScript like this:

$(function($)
{
	// that's it!
	$("textarea").cazary();

	// initial mode: HTML
	$("textarea").cazary({
		mode: "html"
	});

	// full commands
	$("textarea").cazary({
		commands: "FULL"
	});
});

see demo page

CommonJS method

Install Cazary by simply typing npm install cazary
Copy dist/themes to public directory (*.js is not necessary)
Load the theme CSS
Write JavaScript like this:

// this returns a jQuery object!
var $ = require("cazary");
$(function($)
{
	$("textarea").cazary();
});

Options

name	type	description	default
`mode`	String	initial mode ("rte" or "html")	"rte"
`style`	String	style of RTE area	"body{margin:0px;padding:8px;}p{margin:0px;padding:0px;}"
`fontnames`	Array	array of fontname	"Arial", "Arial Black", "Comic Sans MS", "Courier New", "Narrow", "Garamond", "Georgia", "Impact", "Sans Serif", "Serif", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"
`colors`	Array (two-dimensional)	color table	["#ffffff", "#ffcccc", "#ffcc99", "#ffff99", "#ffffcc", "#99ff99", "#99ffff", "#ccffff", "#ccccff", "#ffccff","#cccccc", "#ff6666", "#ff9966", "#ffff66", "#ffff33", "#66ff99", "#33ffff", "#66ffff", "#9999ff", "#ff99ff","#bbbbbb", "#ff0000", "#ff9900", "#ffcc66", "#ffff00", "#33ff33", "#66cccc", "#33ccff", "#6666cc", "#cc66cc","#999999", "#cc0000", "#ff6600", "#ffcc33", "#ffcc00", "#33cc00", "#00cccc", "#3366ff", "#6633ff", "#cc33cc","#666666", "#990000", "#cc6600", "#cc9933", "#999900", "#009900", "#339999", "#3333ff", "#6600cc", "#993399","#333333", "#660000", "#993300", "#996633", "#666600", "#006600", "#336666", "#000099", "#333399", "#663366","#000000", "#330000", "#663300", "#663333", "#333300", "#003300", "#003333", "#000066", "#330099", "#330033"]
`commands`	String or Array	pre-defined macro or (array of) space-separated commands (see below)	"STANDARD"

Commands

commands option must be specified one of followings:
- one of "pre-defined macros"
- any combination of space-separated commands or |(separator)
set of commands can be array
see below about pre-defined macros and commands

pre-defined macros

name	is expanded to...
`MINIMAL`	"bold italic underline strikethrough removeformat"
`STANDARD`	"fontname fontsize","bold italic underline strikethrough removeformat \| forecolor backcolor \| superscript subscript","source"
`FULL`	"fontname fontsize","bold italic underline strikethrough removeformat \| forecolor backcolor \| superscript subscript","justifyleft justifycenter justifyright justifyfull \| indent outdent \| insertorderedlist insertunorderedlist","inserthorizontalrule insertimage createlink unlink","undo redo","source"

commands (inline styles)

name	description
`fontname`	set font name
`fontsize`	set font size
`bold`	set style to bold
`italic`	set style to italic
`underline`	set style to underline
`strikethrough`	set style to strikethrough
`removeformat`	remove all format
`forecolor`	set foreground color
`backcolor`	set background color
`superscript`	set style to superscript
`subscript`	set style to subscript

commands (block styles)

name	description
`justifyleft`	align current block to left
`justifycenter`	align current block to center
`justifyright`	align current block to right
`justifyfull`	justify current block
`indent`	indent current block
`outdent`	un-indent current block
`insertorderedlist`	set current block to ordered list
`insertunorderedlist`	set current block to un-ordered list

commands (insertion / creation)

name	description
`inserthorizontalrule`	insert horizontal rule to current position
`insertimage`	insert image to current position current position
`createlink`	create link to selected text
`unlink`	remove link of selected text

commands (editing)

name	description
`undo`	undo command
`redo`	undo the undone command
`source`	toggle HTML/RTE mode

Project page

http://github.com/shimataro/cazary

Documents for developers

Release note

2016-12-10 version 1.2.3 Using ECMAScript6 syntax Add npm run update-packages command
2016-10-29 version 1.2.2 * change event refreshes WYSIWYG area
2016-03-06 version 1.2.1 Generate demo-legacy.html and src/cazary-legacy.js automatically Modularize Sass mixins * Equip documents
2016-02-19 version 1.2.0 SVG toolbar icons (for HD screen) Changed directory structure
2015-11-22 version 1.1.2 Supports Portuguese/Brazilian Portuguese (by Luiz Eduardo Simões) build method: npm run build
2015-11-07 version 1.1.1 * require("cazary") returns a jQuery object
2015-11-06 version 1.1.0 Supports CommonJS. Translation data format to YAML. * Build by gulp.js.
2015-10-08 version 1.0.1 * Fixed Polish translation.
2015-10-06 version 1.0 * First release.