TinyMCE 在 SPA 中不起作用答案

【问题标题】：TinyMCE not working in SPATinyMCE 在 SPA 中不起作用
【发布时间】：2015-01-22 19:14:43
【问题描述】：

我一直在努力让 TinyMCE 4 使用 sammyjs 在 SPA 中工作。我正在初始化该视图的显示并且工作正常，但是如果您返回然后再次进入该视图，则可编辑的 div 不再可编辑，并且当您单击它时不会显示 tinyMCE。我在这里读过一篇文章 (TinyMce disappears in SPA - Knockout binding evaluated twice causing editor to fail)，说如果您绑定 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>

我很想得到一些帮助，因为我似乎无法让它发挥作用，而且我在这个故事上已经过期了！！非常感谢！

【问题讨论】：

标签： javascript jquery knockout.js tinymce tinymce-4

【解决方案1】：

很抱歉回答我自己的问题...但最终我放弃了尝试保留编辑器实例并使用本文中提到的 tinyMCE 4.x 方法How do i remove tinyMCE and then re-add it?

我必须给出 div 和 ID，然后在初始初始化代码之后，将添加和删除编辑器命令放入 sammy 路由逻辑中......简单！

【讨论】：