I am working on a project with some fairly complex editable fields in popups requirements. I started looking around for a library that would package up the popups so that I can use them without having to start from scratch. I came across the x-editable library which works very smoothly and handles most of what I need it to. One of the requirements is that the textarea in the popup need to be a tinymce editor. Here is my solution to hooking them up. As usual the code is fairly simple and elegant once it works, but getting it to work took far longer than I anticipated.
Html:
<div> <span>Headline:</span> <a href="#" id="puHeadline"><i class="fa fa-edit"></i></a> <div id="textGoesHere"></div> </div>
JavaScript:
$(function () { //---------------------------------------------------------------- // Demo popover edit with tinymce $.fn.editable.defaults.mode = 'popup'; //toggle `popup` / `inline` mode $('#puHeadline').editable({ pk: 1, type: 'textarea', title: 'Headline:', placeholder: 'Enter your headline...', placement: 'right', showbuttons: 'bottom', inputclass: 'tinymce', validate: function(value) { if($.trim(value) == '') { return 'This field is required'; } }, display: function (value) { $('#textGoesHere').html(value); }, }); $('#puHeadline').click(function() { setupTinyMCE(); }); function setupTinyMCE() { // TinyMCE functionality $('.tinymce').tinymce({ // Location of TinyMCE script script_url: '/scripts/tinymce/4.0.25/tinymce.min.js', // General options theme: "modern", plugins: "link code fullscreen fmgwordpaste", toolbar: "bold italic | alignleft aligncenter alignright | fullscreen", menubar: false, statusbar: false, content_css: "/areas/c2c/Content/css/editor.css", setup: function(editor) { }, init_instance_callback: function(editor) { $('.mce-tinymce').show(); $(editor.getContainer()).find(".mce-path").css("display", "none"); }, }); } });