cazary

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

shimataro
12
6
JavaScript

Cazary

Join the chat at https://gitter.im/shimataro/cazary
NPM Downloads

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

NPM

jQuery version

Supported browsers

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

  • 2015-11-07 version 1.1.1

    • require("cazary") returns a jQuery object

  • 2015-11-06 version 1.1.0

  • 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