jQuery Plugin For Editable Html Elements with WYSIWYG Editor - Stix.js

File Size: 4.93 KB
Views Total: 5831
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Editable Html Elements with WYSIWYG Editor - Stix.js

Stix.js is a jQuery plugin which allows you to append an inline WYSIWYG editor to any Html element to make it editable. The plugin requires Font Awesome 4.x for editor icons. If you're using Font Awesome 3.0, please download this version.

Basic Usage:

1. Load the Font Awesome and stix.css in the head section of the page.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="stix.css"/>

2. Load the jQuery library and Stix.js at the bottom fo the page.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="stix.js"></script> 

3. Wrap the Html elements you want to edit in a wrapper.

<div id="test">
Editable content goes here
</div>

4. Call the plugin on the wrapper you just created.

$(function(){
	$("#test").stix();
});

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