This time I will share jQuery Plugin and tutorial about Basic WYSIWYG Text Editor For jQuery – WYSIWYG.JS, hope it will help you in programming stack.
The jQuery WYSIWYG.JS plugin generates a simple, easy-to-customize WYSIWYG text editor with custom controls for your textarea element.
How to use it:
1. First you need to load both jQuery library and the jQuery WYSIWYG.js plugin in the html document.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="src/wysiwyg.js"></script> |
2. Create the editor controls for your textarea element
01 |
<button class="bold">Bold</button> |
02 |
<button class="italic">Italic</button> |
03 |
<button class="underline">Underline</button> |
04 |
<button class="orderedList">Ordered List</button> |
05 |
<button class="unOrderedList">Unordered List</button> |
06 |
<button class="right">Right Text</button> |
07 |
<button class="left">Left Text</button> |
08 |
<button class="center">Center Text</button> |
09 |
<button class="full">Justify Full</button> |
10 |
<button class="rule">Horizontal Rule</button> |
11 |
<button class="sub">Subscript</button> |
12 |
<button class="super">Superscript</button> |
13 |
<button class="strike">Strikethrough</button> |
14 |
<button class="remove">Remove Formating</button> |
15 |
<button class="indent">Indent</button> |
16 |
<button class="outdent">Outdent</button> |
17 |
<button class="select">Select All</button> |
18 |
<button class="unlink">Unlink</button> |
19 |
<button class="undo">Undo</button> |
20 |
<button class="redo">Redo</button> |
21 |
<button class="html">HTML</button> |
22 |
<button class="raw">Raw HTML</button> |
24 |
<option disabled="true" selected="true">Select a font</option> |
25 |
<option value="ebrima">Ebrima</option> |
26 |
<option value="arial">Arial</option> |
27 |
<option value="georgia">Georgia</option> |
30 |
<option value="1">1</option> |
31 |
<option value="2">2</option> |
32 |
<option value="3">3</option> |
33 |
<option value="4">4</option> |
34 |
<option value="5">5</option> |
35 |
<option value="6">6</option> |
36 |
<option value="7">7</option> |
38 |
<input type="text" id="colory" placeholder="Font Color"> |
39 |
<input type="text" id="linky" placeholder="Enter Link URL"> |
40 |
<input type="url" id="imagey" placeholder="Enter Image URL"> |
41 |
<input type="url" id="codey" placeholder="Enter HTML code"> |
42 |
<button class="demo-btn">Custom Functions</button> |
43 |
<button class="code">Insert Code Block</button> |
1 |
<textarea id="wysiwyg" cols="30" rows="10"></textarea> |
2 |
<pre class="rawHTML"></pre><br type="_moz"> |
3. The JavaScript to activate the WYSIWYG editor.
05 |
underline: $(".underline"), |
06 |
orderedList: $(".orderedList"), |
07 |
unOrderedList: $(".unOrderedList"), |
08 |
justifyCenter: $(".center"), |
09 |
justifyRight: $(".right"), |
10 |
justifyLeft: $(".left"), |
11 |
justifyFull: $(".full"), |
12 |
insertHorizontalRule: $(".rule"), |
14 |
superscript: $(".super"), |
15 |
strikeThrough: $(".strike"), |
16 |
removeFormat: $(".remove"), |
17 |
selectAll: $(".select"), |
19 |
outdent: $(".outdent"), |
