Click to add text....
Done Cancel

Textifyed.js is a simple jQuery plug-in which helps you manage textareas on the page. Click in the div above to see textifyed in action.

Here is how it works


Textifyed is very easy to use. Set up the html syntax like the example below.

<div class="containerDiv"></div>
<a href="#" class="btnDone">Done</a>
<a href="#" class="btnCancel">Cancel</a>


Initialize textifyed by the following code

$('textarea#txtDescription]').textifyed({text: '', div: '.notesContainerDiv'});

The code below demonstrates how TinyMCE can be used alongside Textifyed. Textifyed listens to the "custom:init" event when working with TinyMCE.

var Editor = function (el) {
   var options = {
       selector: '#' + el.attr('id'),
       theme: 'modern',
       setup: function (ed) {
           ed.on('init', function () {
   try {
   } catch (e) {
$('textarea#txtDescription').textifyed({text: '', div: '.containerDiv', Editor: Editor});

In the example above we pass in two options 'text' & 'div' to textifyed. The list below shows all the possible options that can be used and what the purpose of each is.

trigger The event that will be used to toggle the visibility of textarea. Default is 'click'.
placeholder The placeholder text to be displayed if the no text is entered. Defaults to 'Click to add text..'
text The text to be displayed in the div and textarea.
div The div which will be used by the plug-in.
Editor The TinyMCE Editor constructor which will be used to create rich text experience. If no Editor instance is passed then the default textarea behavior will be used.