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....
</div>

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="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.5/tinymce.min.js"></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 () {
                el.trigger('custom:init');
            });
        }
    };

    try {
        window.tinymce.init(options);
    } catch (e) {
        window.alert(e.message);
    }
};

7. Initialize the jQuery Textifyed plugin.

$('textarea#txtDescription').textifyed({
  div: '.demo',  // target editable element
  Editor: Editor, 
  placeholder: 'Click here to edit...'
});

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

$('textarea#txtDescription').textifyed({
  text: 'Your Text Here'
});

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

$('textarea#txtDescription').textifyed({
  trigger: 'click'
});

---

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