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");
},
});
}
});
Amy's Tech Notes 
Yeah this didn’t work for me, and I’m not sure how you got it to work.
x-editable keeps its own handle to the native textarea, and pulls the data directly from there on the submit action, bypassing TinyMCE altogether. TinyMCE’s strategy of hooking the form submit doesn’t work since x-editable doesn’t use that (which makes sense since its ajax based!) And since the data hasn’t changed, it closes the editor with no action taken.
The fix for that is the following in the tinymce editor initialization, which copies the TinyMCE buffer to the original textarea after every change (keystroke). This has to be done because x-editable doesn’t have a hook to override data retrieval, so we don’t know when x-editable is going to read the buffer to send to the server…
setup: function (editor) {
editor.on(‘change’, function () {
tinymce.triggerSave();
});
Second problem is that x-editable textarea defaults to converting HTML markup to html escape characters, so the markup gets printed in the non-edited textarea. The solution to this is to set escape: false while initializing the x-editable textarea widget (this is in the x-editable documentation for textarea)
Third problem for x-editable inline editing is that the ok/cancel buttons fall into the non-edit region for some reason, and x-editable’s behavior is to cancel editing if there’s a click outside the editable region. This is pretty crappy for textarea editing anyhow since an accidental click can wipe out a whole lot of document editing. I solved this by hooking the x-editable “shown” event, and removing the document-level click event handler:
$(“.editarea”).on(“shown”, function(e, editable) {
$(document).off(“click.editable”);
});
where .editarea is my class for all my x-editable textarea widgets.
A better solution would be to create a new provider for x-editable, but that’s a larger undertaking!
Hope this helps someone!
LikeLike
Thanks for the update on how you got it to work! It’s been a long time since I did this project but it was pretty complex. I should go back and see how many times we have tweaked it to see how it works now. One additional complexity that we have is that we are using it with Knockout so it had even one more layer on top of it.
LikeLike
I just spent a bit more time thinking on it and I think the reason this code worked for our needs was that we are not using the x-editable display code. We override it and display the results of the popover ourselves. I would not have caught any issues with that binding.
LikeLike