TinyMCE的消失在SPA - 淘汰赛结合两次评估导致编辑失败 [英] TinyMce disappears in SPA - Knockout binding evaluated twice causing editor to fail

问题描述

我想实现的 TinyMCE的的成约翰爸爸的的 HotSpa模板的

I’m trying to implement TinyMCE into John Papa’s HotSpa template.

我目前使用的淘汰赛3.1.0 和迪朗达尔2.0 的

对于一些未知的原因，我的自定义淘汰赛结合init（）方法被触发仅在第一次加载一次，但如果认为是两次刷新。

For some unknown reason, my custom knockout binding init method is triggered only once on first load, but twice when view is refreshed.

通过刷新，我的意思是使用路由器迪朗达尔，我浏览到了同样的观点再次（但具有不同的参数）。它仍然在整个迪朗达尔生命周期的钩子deattached和连接再次调用。

By refresh, I mean using durandal router, I navigated to the same view again (but with different parameters). It still went through the whole durandal life cycle, hooks of deattached and attached are called again.

我有一些调试code在那里的第二次调用返回 .editors.length = 1 这意味着编辑器的第一个呼叫已经被初始化。

I had some debug code in there where the second call returned .editors.length = 1 which means the editor was already initialized in the first call.

请注意：里面的init方法我有一个方法 ko.utils.domNodeDisposal.addDisposeCallback ，由于某种原因它是第二初始化调用后调用。我评论它和 TinyMCE的的还是消失。我通过编辑环，发现它被认为是隐藏的。 isHdidden = TRUE 。

Note: Inside the init method I have a method ko.utils.domNodeDisposal.addDisposeCallback and for some reason it is called after the second init call. I commented it out and tinyMCE still disappears. I looped through the editors and noticed it is deemed hidden. isHdidden = true.

<textarea id="mytinymce" class="tinymce" 
          data-bind="attr: {id: FieldId}, tinymce: FieldValue"></textarea>

页面最初与TinyMCE的控制正确加载，但它的屏幕刷新后失败。

The page initially loads properly with the TinyMCE control, however it fails after a screen refresh.

我从导航视图，退避三舍。

I navigate away from the view, and back.

ko.bindingHandlers.tinymce = {
        init: function (element, valueAccessor, allBindingsAccessor, 
                        context, arg1, arg2) {
            var options = allBindingsAccessor().tinymceOptions || {};
            var modelValue = valueAccessor();
            var value = ko.utils.unwrapObservable(valueAccessor());

            var el = $(element);
            var id = el.attr('id');

            //options.theme = "advanced";
            options.theme = "modern";

            options.menubar = false;
            options.plugins = [
                "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
                "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                "table contextmenu directionality template textcolor paste fullpage textcolor"
            ];
            //tinymce buttons
            //http://www.tinymce.com/tryit/classic.php
            options.toolbar_items_size = 'small';
            options.toolbar1 =
            "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | forecolor backcolor | hr removeformat | subscript superscript  ";

            ////handle edits made in the editor. Updates after an undo point is reached.
            options.setup = function (editor) {
                editor.on('change', function (e) {
                    if (ko.isWriteableObservable(modelValue)) {
                        var content = editor.getContent({ format: 'raw' });
                        modelValue(content);
                    }
                });

            };

            el.html(value);

            $(element).tinymce(options);

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                var tinymceInstance = tinyMCE.get(id);
                if (tinymceInstance != undefined) {
                    // if instance already exist, then get rid of it... we don't want it
                    tinymceInstance.remove();
                }
            });              
        },
        update: function (element, valueAccessor, allBindingsAccessor, 
                          context) {

            var el = $(element);
            var value = ko.utils.unwrapObservable(valueAccessor());
            var id = el.attr('id');

            //handle programmatic updates to the observable
            // also makes sure it doesn't update it if it's the same. 
            // otherwise, it will reload the instance, causing the cursor to jump.
            if (id !== undefined) {
                //$(el).tinymce();

                var tinymceInstance = tinyMCE.get(id);
                if (!tinymceInstance)
                    return;
                var content = tinymceInstance.getContent({ format: 'raw' });
                if (content !== value) {
                    //tinymceInstance.setContent(value);
                    valueAccessor(content);
                    //$(el).html(value);
                }
            }
        }
    };

不幸的是我没有看到在控制台但是编辑（包括文本区）的任何错误都隐藏不可见。

Unfortunately I don't see any errors in the console but the editor (including the text area) are hidden and not visible.

推荐答案

我已经改变了的html：

I have changed the html to:

<textarea data-bind="tinymce: FieldValue"></textarea>

即。删除ID属性绑定。

i.e. removed the id attribute binding.

和现在的作品。

我注意到它仍然调用初始化两次，但它的工作原理。

I noticed it still calls init twice but it works.

您必须让TinyMCE的控制ID。

You must let TinyMCE control the ID.

这篇关于TinyMCE的消失在SPA - 淘汰赛结合两次评估导致编辑失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！