jQuery TE is an open source library of WYSIWYG model text editor (jQuery HTML Editor Plugin) component.
Everything is as simple as the following:
$(“textarea”).jqte();
If you have created a textarea and the value of class, such as “editor” used with the $(“.editor”).jqte(); will be enough to write script.
Of course you can also use a different attribute value.
First include the latest version of jQuery. Next, download and include jquery-te-Core.js and jquery-te-Style.css (inside to head tags)
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jquery-te-Core.js"></script>
<link type="text/css" rel="stylesheet" href="jquery-te-Style.css" charset="utf-8" />After that, create a textarea inside to body tags
<textarea></textarea>Finally, run this plugin
<script>
$("textarea").jqte();
</script>That's it!
I've made this amazing thing responsive, so it works with jQuery mobile.
Added Image support as well - how to use:
var config = {
onClick: function(){
var src = "http://some.com/image.png";
config.insertImage(src);
}
}
$("textarea").jqte().jqte_image(config);The great thing about this setup, is that you decide WHEN to insert the image.
E.g:
var config = {
onClick: function () {
$.get("imagerequest.php", function(result) {
// The server has returned a string - our image!
config.insertImage(result);
});
}
}This allows asynchronous logic.