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

• Click the div to see the textarea for text entry.
• Cancel & Done buttons hide the textarea & take you back to the div.
• If the text entered in the textarea is more than 3 lines then more/less links will be used to save space. (Note: When using TinyMCE use Shift+Enter)
• Size of the textarea depends on the amount of text displayed in div i.e. If you clicked more to see all of the text, then the textarea displayed will be larger to accomodate all the text.

Usage

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

<div class="containerDiv"></div>

<textarea#txtDescription"></textarea>

<a href="#" class="btnDone">Done</a>

<a href="#" class="btnCancel">Cancel</a>

Options

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 () {

               el.trigger('custom:init');

           });

       }

   };

   try {

        window.tinymce.init(options);

   } catch (e) {

        window.alert(e.message);

   }

};

$('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.