TinyMCE 不能在 SPA 中工作

Question

我一直在努力使用 sammyjs 让 TinyMCE 4 在 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>

我希望得到一些帮助，因为我似乎无法让它发挥作用，而且我已经迟到了这个故事！！非常感谢！

Answer 1

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

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

TinyMCE 不能在 SPA 中工作

TinyMCE not working in SPA

javascript

jquery

tinymce

knockout.js

tinymce-4