I have been struggling with getting TinyMCE 4 working in a SPA using sammyjs. I am initialising on display of that view and that works fine, however if you navigate back and then enter that view again the editable div is no longer editable and tinyMCE does not display when you click into it. I have read an article (TinyMce disappears in SPA - Knockout binding evaluated twice causing editor to fail) on here saying this happens if you bind the ID, but I am not doing that and also am not specifying an ID (makes no difference either way). I have tried making sure we don't call init again, in case that was messing it up but to no avail! My sammy route with the initialisation is below
this.get('#:createmode', function () {
var createMode = this.params['createmode'];
if (createMode === ko.i18n('menu.item')) {
model.showPageTitle(false);
// alert('init');
if (!model.tinymceLoaded()) {
console.log('tinymce init');
tinymce.init({
selector: "div.editable",
inline: true,
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "bold italic underline | alignleft aligncenter alignright alignjustify | table | hr | charmap fontsizeselect ",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote subscript superscript | undo redo ",
menubar: false,
toolbar_items_size: 'small',
init_instance_callback: model.tinymceinitcallback,
style_formats: [
{ title: 'Bold', inline: 'b' },
{ title: 'Red', inline: 'span', styles: { color: '#ff0000' } },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
],
setup: function (editor, f) {
var is_default = true;
editor.on('MouseDown', function (editor, e) {
console.log(editor);
if (editor.target.innerText)
is_default = (editor.target.innerText.trim() == model.originalEditorText.trim());
if (!is_default) {
return;
}
tinyMCE.activeEditor.dom.removeClass(tinyMCE.activeEditor.dom.select('p'), 'darkGray');
tinyMCE.activeEditor.setContent('');
is_default = false;
// replace the default content with nothing
});
editor.on('Change', function (element) {
model.editorText(element.target.bodyElement.innerText);
});
editor.on('Blur', function (element) {
if (element.target.bodyElement.innerText.length < 2) {
tinyMCE.activeEditor.setContent(model.originalEditorText);
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.dom.select('p'), 'darkGray');
}
});
}
})
}
else
{
console.log(tinymce.EditorManager);
}
}
});
My HTML is very simply..
<div class="contenteditor editable" contenteditaable="true" ></div>
I would love some help on this as I just can't seem to get it to work and I'm way overdue on this story!! Many thanks!
