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

• English
• Japanese
• Polish
• Portuguese
• Brazilian Portuguese

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

• How to build
• How to translate

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.

Recruitment

I'm looking for human resources. Please contact me in my GitHub page!

• translators - except English and Japanese (translate from English or Japanese)
• designers - please create cool themes!

Credits

• yuqianyumo - Introducing Cazary in website
• Paweł Klockiewicz - Polish Translation
• Luiz Eduardo Simões - Portuguese/Brazilian Portuguese Translation
• GNU FreeFont - "flat" theme uses FreeSans
• Brad Owen - Testing on Safari for Mac