Cazary
jQuery plugin of WYSIWYG editor that aims for fast, lightweight, stylish, customizable, cross-browser, and multi-language.
jQuery version
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
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
andsrc/cazary-legacy.js
automatically - Modularize Sass mixins
- Equip documents
- Generate
-
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
-
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