Make Element Editable With Tinymce Support - jQuery Textifyed

File Size: 9.28 KB
Views Total: 5099
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Make Element Editable With Tinymce Support - jQuery Textifyed

Textifyed is a jQuery Inline Editor plugin which makes any element editable, with Tinymce WYSIWYG HTML editor support. The plugin also has the ability to hide the long content which is more than 3 lines with Read More and Read Less links.

How to use it:

1. Create an element which should be editable by the user.

<div class="demo muted">
  Click to add text....

2. Create a textarea element to edit the element.

<textarea id="txtDescription"></textarea>

3. Create buttons to confirm and cancel the editing.

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

4. Insert the necessary jQuery library and Tinymce editor into the web page.

<script src=""></script>
<script src=""></script>

5. Insert the jQuery Textifyed plugin after jQuery.

<script src="js/textifyed.js"></script>

6. Create a new editor for the editable element. For more options, refer to Tinymce Doc.

var Editor = function (el) {
    var options = {
        selector: '#' + el.attr('id'),
        theme: 'modern',
        paste_as_text: true,
        branding: false,
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        setup: function (ed) {
            ed.on('init', function () {

    try {
    } catch (e) {

7. Initialize the jQuery Textifyed plugin.

  div: '.demo',  // target editable element
  Editor: Editor, 
  placeholder: 'Click here to edit...'

8. Set the text to be displayed in the editable element.

  text: 'Your Text Here'

9. Set the trigger element to toggle the edit mode.

  trigger: 'click'

This awesome jQuery plugin is developed by idesi. For more Advanced Usages, please check the demo page or visit the official website.