article:
Website: WordPress Medical Theme
article:
Mockup: iPhone 5 Psd Landscape Mockup

JS Plugin: jQuery TE - WYSIWYG model text editor

Advertisement

In computing, a WYSIWYG editor is a system in which content (text and graphics) displayed onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product, which might be a printed document, web page, or slide presentation. WYSIWYG is an acronym for ``what you see is what you get``.

WYSIWYG implies a user interface that allows the user to view something very similar to the end result while the document is being created.

In general WYSIWYG implies the ability to directly manipulate the layout of a document without having to type or remember names of layout commands.

jQuery TE is an open source library of WYSIWYG model text editor (HTML Editor) component.


Resource Plugin: jQuery TE - WYSIWYG model text editor


Implementation

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery-te-1.0.6.min.js" charset="utf-8"></script>
<link type="text/css" rel="stylesheet" href="jquery-te-Style.css" charset="utf-8" />
</head>


<body>

<!-- html code -->
<textarea name="text"></textarea>

<!-- javascript code -->
<script type="text/javascript">
$('textarea').jqte();
</script>
</body>

other sample using css:

<!-- html code -->
<textarea class="editor"></textarea>

<!-- javascript code -->  
<script type="text/javascript">
    $(".editor").jqte({css:"example"});
</script>

<!-- css code -->

.example { } // this is the text editor`s class
.example_Panel { } // this is button panel's class of the text editor`s
.example_Content { } // this is content area's class of the text editor`s



Key acronyms are as follows

- b: bold $(``.editor``).jqte({b:false});
- i: italic
- u: underline
- ol: ordered list
- ul: unordered list
- sub: subscript
- sup: superscript
- outdent: outdent
- indent: indent
- strike: strike through
- link: add/modify hyper links
- unlink: remove links
- remove: cleaner style
- rule: horizontal rule



Keyboards Shortcuts

- Bold: ctrl + b
- Italic: ctrl + i
- Underline: ctrl + u
- Ordered list: ctrl + . (dot)
- Unordered list: ctrl + , (comma)
- Subscript: ctrl + down arrow
- Superscript: ctrl + up arrow
- Outdent: ctrl + left arrow
- Indent: ctrl + right arrow
- Strike through: ctrl + l
- Link: ctrl + k
- Unlink: ctrl + n
- Cleaner style: ctrl + delete
- Horizontal rule: ctrl + h



Screenshots

Resource Plugin: jQuery TE - WYSIWYG model text editor

Resource Plugin: jQuery TE - WYSIWYG model text editor

Resource Plugin: jQuery TE - WYSIWYG model text editor


Please share your feedback in comments below.




demo
download
source

Advertisement
Tags: plugin, jquery, wysiwyg, editor, web, javascript, js, css, stylesheet, html, interface, online, free, keyboards, shortcuts, key, acronyms

Leave a Comment

No Comment

© Creative3x Ltd.