javascript - Tinymce在meteorjs中随机不渲染

Question

我来这里是因为我对 Meteorjs + Tinymce 有一个大问题。希望你能帮助我...

让我解释一下我的情况。

我有一个我自己制作的多步骤表单的基本模板。在此基本模板中，有一个动态模板函数，用于呈现每个步骤(单击下一步按钮时，它呈现下一步。)

这是我的不同模板:

AdminTrainingsInsertForm(基础)

1. 培训师(第一步)
2. 培训(第二步)
3. 必需(第三步)
4. 实用(第四步)<- 正是在这一步中，我在 3 个文本区域上渲染tinymce
5. 时间表(第五步)

这是我渲染tinymce的代码，当我的实际步骤(模板)被渲染时:

tinymce.init({
    selector: ".tinyted",
    plugins: [
        'autolink link'
    ],
    toolbar: 'undo redo | bold italic underline | link bullist',
    menubar: false,
    statusbar: false,
    inline: false,
    skin_url: '/packages/teamon_tinymce/skins/lightgray',
    setup : function(ed) {
        ed.on('keydown', function(e) {
            var body = tinymce.get($(this)[0].id).getBody(), text = tinymce.trim(body.innerText || body.textContent);

            var ref = $('textarea[id='+$(this)[0].id+']');
            text = text.replace(/(\r\n|\n|\r)/gm,"");
            var len = text.length;
            var maxChar = parseInt(ref.data('max'));

            if ( (len) > maxChar ) { // prevent type because text length > max chars authorized
                e.preventDefault();
                e.stopPropagation();
                return false;
            }

            // update count words div
            if ($(this)[0].id == 'practical-description')
                $('#description-count').html(len);
            if ($(this)[0].id == 'practical-details')
                $('#details-count').html(len);
            if ($(this)[0].id == 'practical-agenda')
                $('#agenda-count').html(len);

        });
    }
});

如您所见，tinymce 在 textarea 上初始化，类为 tinyted

问题是:我正在以多步骤形式执行一个流程，tinymce 已渲染。我验证它，将所有数据插入我的 mongodb 并呈现所有这些不同数据的列表。接下来，我将通过该多步骤重做一个新流程，在第 4 步中，tinymce 未渲染...所以这是一个 show-stopper 问题:(

有人可以提供解决方案或解决此问题的方法吗？感谢您对 future 的回答!

Answer 1

如果您使用的是加载/卸载 TinyMCE 的 SPA 风格框架，您需要确保在正确的时间 init() 和 remove() TinyMCE。

当您想要加载 TinyMCE 时，您可以使用 init() ，您第一次似乎做得正确。

当您“离开”该步骤时，您需要在框架删除相关 DOM 元素之前正确remove()每个 TinyMCE 实例。

当您返回到该步骤时，您可以再次使用 init()。如果您在离开该步骤时不 remove() TinyMCE，它仍然有一个编辑器对象，但它现在指向不再存在的 DOM 对象，因此 TinyMCE 无法“工作”。