Simple Html WYSIWYG Editor Plugin with jQuery - Cazary

Cazary is a jQuery plugin that converts textarea fields or other Html elements into simple, customizable WYSIWYG rich text editors for easier content editing.

How to use it:

1. Add a theme CSS in the head section for editor styles. You can also add more themes, just like in style.css .

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

2. Add jQuery library and the jQuery cazary plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="cazary.js"></script>

3. Call the function to generate an Html WSYIWYG editor bar inside the textarea (or any other Html elements).

$("textarea").cazary();

4. That's it. Override the options as shown below to create own editor.

// "rte" or "html"
mode: "rte",

// custom body styles
style: "body{margin:0px;padding:8px;}p{margin:0px;padding:0px;}",

// an array of font names
fontnames: [
	"sans-serif", "serif", "cursive", "fantasy", "monospace",
	"Arial", "Arial Black", "Comic Sans MS", "Courier New", "Narrow", "Garamond",
	"Georgia", "Impact", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"
],

// an array of pre-defined colors
colors: [
  ["#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"]
],

// editor layout
// "STANDARD", "MINIMAL" or "FULL"
commands: "STANDARD"

Change log:

2016-12-10

• v1.2.3

2016-03-06

• v1.2.0: improvement

---

This awesome jQuery plugin is developed by shimataro. For more Advanced Usages, please check the demo page or visit the official website.