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

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.