TinyMCE在SPA中不起作用

TinyMCE not working in SPA

本文关键字:不起作用 SPA TinyMCE      更新时间:2023-09-26

我一直在努力让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 路由逻辑中......简单!