创建TinyMCE内联编辑器并使其从按钮可见

Question

我想在内联模式下使用TinyMCE 4.1.7.当用户右键单击DIV并选择编辑,表示他们想要编辑DIV时,我执行

var id= g.currentElement$.attr('id');
            tinymce.init({
                selector: "div#"+id,
                inline:true,
            });

这增加了一个TinyMCE编辑器(我知道因为我捕获了一个AddEditor事件)但它似乎没有将编辑器元素附加到DOM(我在Chrome DevTools Elements选项卡中看不到它们).为了显示编辑器,我必须在DIV中单击.

我想更改此行为,以便当用户右键单击DIV并选择"编辑"时,我的处理程序也会通过单击DIV触发现在触发的任何内容.因此,在我启动编辑器之后,如上所述,我需要调用一些其他方法将编辑器附加到DOM并使其可见,因此单击上下文菜单中的Edit即可调出TinyMCE编辑器.

有人能告诉我我需要做些什么才能做到这一点？

(我不能单击DIV来调出编辑器的原因是单击已经意味着其他东西.单击选择DIV,可以删除,复制,轻推等.DIV上的拖动移动在DIV角上拖动可以调整DIV的大小.右键单击"编辑"选项就是我剩下的.)

谢谢你的帮助.

史蒂夫

Answer 1

我的工作原理如下.我首先运行tinymce init:

var id= g.currentElement$.attr('id');
tinymce.init({
    selector: "div#"+id,
    inline:true,
});

这会为元素创建一个编辑器,但不会渲染或显示它.渲染和显示编辑器通常需要在元素上进行mousedown.

在逐步完成大量的代码后,我意识到在编辑器实例上触发focusin事件是编辑器渲染和显示的原因.所以我为AddEditor创建了一个回调.AddEditor事件在编辑器创建过程的早期就出现了,我不想在编辑器完成之前激活焦点,所以在AddEditor事件中我得到编辑器实例并为"NodeChange"创建一个回调,这发生了在编辑器的最后创建.

当NodeCreate进来时,我在编辑器上激活了一个"focusin",然后根据需要呈现并显示编辑器.现在,单击即可运行tinymce init,并在元素顶部显示并准备好内联编辑器.

总代码是:

tinymce.on('AddEditor', function(e) {
    e.editor.on('NodeChange', function(e) {  // now that we know the editor set a callback at "NodeChange."
        e.target.fire("focusin");       // NodeChange is at the end of editor create. Fire focusin to render and show it
    });
});

如果有人发现任何错误,我会非常感谢任何评论.

谢谢