在流星中使用所见即所得的 contenteditable答案

【问题标题】：using contenteditable with wysiwyg in meteor在流星中使用所见即所得的 contenteditable
【发布时间】：2014-11-23 01:32:14
【问题描述】：

我正在尝试使用 redactor.js 在流星中编辑一些 div；在我的模板中：

<template name="home">
    <section class="editable">
    </section>
    ...
</template>

在js中：

Template.home.events({
    "click section.editable": function(event) {
        $(event.target).redactor();
    },
});

当我单击该部分时，这会正确创建编辑器所见即所得编辑器；问题是再次单击会创建另一个编辑器（嵌套在前一个编辑器中）；仅当编辑器不存在时，我才尝试限制 redactor() 方法的执行，但没有成功。

【问题讨论】：

标签： meteor wysiwyg redactor.js

【解决方案1】：

您可以将状态包装在会话变量中吗？当然，一旦编辑器完成，您需要再次设置它（也许尝试挂钩到模糊事件？）

Template.home.events({
    "click section.editable": function(event) {
        var isEditorActive = Session.get("editorActive", false);
        if (!isEditorActive) {
            Session.set("editorActive",true);
            $(event.target).redactor({
                blurCallback: function(e)
                {
                    Session.set("editorActive",false);
                    this.core.destroy(); // destroy redactor ?
                }
            });
        }
    }
});

以前：

您是否有特殊原因要为此使用流星事件？你可以只使用 redactor。
if (Meteor.isClient) {
    Meteor.startup(function() {
        $('section.editable').redactor({
            focus: false
        });
    });
}

【讨论】：

好吧，将它绑定到点击事件的原因是我正在尝试实现点击编辑模式；我不想从已经存在的编辑器开始；只是一个普通的div，当你点击它时，编辑器就会显示出来
@CerealKiller 我已经更新了我的答案。让我知道你过得怎么样。
是的，但是此解决方案不支持同时活动的更多编辑器（您将需要比变量更复杂的东西来跟踪编辑器状态...）；最后，我使用了一个解决方案，在激活编辑器时添加自定义（编辑）类，并在停用时将其删除；检查编辑器 .hasClass('.editing') 是否让您决定是否必须调用 redactor() 方法...
啊，我明白了。问题中并不清楚这一要求。感谢您接受答案。