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并使其可见，因此单击上下文菜单中的编辑即可调出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事件中我得到了编辑器实例并为＆＃34;创建了一个回调。 NodeChange，＆＃34;这发生在编辑器创建的最后。

当NodeCreate进来时，我开始关注＆＃34;关注＆＃34;在编辑器上，按照我的意愿渲染和显示编辑器。现在，单击一下，运行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
    });
});

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

由于

Answer 2

tinymce.init({
    selector: "div#"+id,
    inline:true,
    setup: function (ed) {
       ed.on('init', function(e) {                        
          e.target.fire("focusin");
       });
    }
});

这将为启动编辑器实例提供诀窍。然后，最好对页面上的每个编辑器实例的每个NodeChange事件进行全局触发。（假设有多个编辑器，但也可以使用单个编辑器。）

等待...

使用JS Promises有更好的做法。 tinymce.init返回一个Promise对象。

let tinyMcePromise= tinymce.init({
    selector: "div#"+id,
    inline:true
});

tinyMcePromise.then(function(editors){
    editors[0].focus();
});

官方文档：https://www.tinymce.com/docs/api/tinymce/root_tinymce/#init

当心：tinyMce的某些旧版本存在有关init Promise的错误。

Answer 3

**Please first add jquery and tinymce library..**   

 <script src="latestjquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="tinymce.min.js"></script>
    <form method="post">
        <textarea>here firstly onlciki will show menu and when edit will be selcted then it will be converted into ediotr</textarea>
      </form>
    <ul class='custom-menu'>
      <li data-action = "first">First thing</li>
      <li data-action = "second">Second thing</li>
      <li data-action = "third">Third thing</li>
    </ul>
    <script>
    //Trigger action when the contexmenu is about to be shown
    $("textarea").bind("contextmenu", function (event) {

        // Avoid the real one
        event.preventDefault();

        // Show contextmenu
        $(".custom-menu").finish().toggle(100).

        // In the right position (the mouse)
        css({
            top: event.pageY + "px",
            left: event.pageX + "px"
        });
    });


    // If the document is clicked somewhere
    $("textarea").bind("mousedown", function (e) {

        // If the clicked element is not the menu
        if (!$(e.target).parents(".custom-menu").length > 0) {

            // Hide it
            $(".custom-menu").hide(100);
        }
    });


    // If the menu element is clicked
    $(".custom-menu li").click(function(){
          tinymce.init({
            selector: "textarea"
         });
        // This is the triggered action name
        switch($(this).attr("data-action")) {

            // A case for each action. Your actions here
            case "first": alert("first"); break;
            case "second": alert("second"); break;
            case "editor": alert("editor will appear"); 

            break;
        }

        // Hide it AFTER the action was triggered
        $(".custom-menu").hide(100);
      });
    </script>   
    <style>
    .custom-menu {
        display: none;
        z-index: 1000;
        position: absolute;
        overflow: hidden;
        border: 1px solid #CCC;
        white-space: nowrap;
        font-family: sans-serif;
        background: #FFF;
        color: #333;
        border-radius: 5px;
    }

    .custom-menu li {
        padding: 8px 12px;
        cursor: pointer;
    }

    .custom-menu li:hover {
        background-color: #DEF;
    }
    </style>

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

3 个答案: