TinyMCE在SPA中不起作用
TinyMCE not working in SPA
我一直在努力让TinyMCE 4使用sammyjs在SPA中工作。我正在初始化该视图的显示并且工作正常,但是如果您向后导航然后再次进入该视图,则可编辑的div不再可编辑,并且当您单击它时不会显示tinyMCE。我在这里读过一篇文章(TinyMce 在 SPA 中消失 - 挖空绑定评估两次导致编辑器失败)说如果您绑定 ID 就会发生这种情况,但我没有这样做,也没有指定 ID(无论哪种方式都没有区别)。我已经尝试确保我们不会再次调用init,以防万一弄乱了它,但无济于事!我的初始化路径如下
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);
}
}
});
我的HTML非常简单。
<div class="contenteditor editable" contenteditaable="true" ></div>
我希望在这方面得到一些帮助,因为我似乎无法让它工作,而且我早就应该在这个故事上了!!非常感谢!
很
抱歉回答我自己的问题...但最终我放弃了尝试保留编辑器实例,并使用了这篇文章中提到的 tinyMCE 4.x 方法如何删除 tinyMCE 然后重新添加它?
我必须给出div 和 ID,然后在初始初始化代码之后,将添加和删除编辑器命令放入 sammy 路由逻辑中......简单!
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- SPA异步调用在IE 11中不起作用
- TinyMCE在SPA中不起作用
- Javascript范围在角度SPA应用程序中不起作用
- 突出显示.js在 AngularJS SPA 中不起作用
- 带有淘汰SPA的HTML尝试使用组件,绑定不起作用