Question

我一直在努力让TinyMCE 4使用sammyjs在SPA中工作。我正在初始化该视图的显示并且工作正常，但是如果您向后导航然后再次进入该视图，则可编辑的div不再可编辑，并且当您单击它时不会显示tinyMCE。我在这里读过一篇文章（TinyMce disappears in SPA - Knockout binding evaluated twice causing editor to fail），如果你绑定了ID就会发生这种情况，但我没有这样做，也没有指定一个ID（无论如何都没有区别）。我已经尝试过确保我们不会再次调用init，以防它搞砸了但无济于事！初始化的我的sammy路线低于

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

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

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

TinyMCE不在SPA工作

1 个答案: