javascripttinymce-4

How to find the end of node in tinymce?


I want to insert a text after the end of next closing tag in tinymce. For ex. <p>This is <span>This is a s|pan</span>paragraph</p>. '|' shows my cursor position, I need to place my cursor after '</span>|'.


Solution

  • Here's an outline for what you need to do:

    // get a reference to the Editor instance
    // (depending on your scenario, this may come from a different place)
    var editor = tinymce.activeEditor;
    
    // get the node your cursor is in - the one you want to insert after
    var endNode = editor.selection.getEnd();
    
    // move the selection after the current node
    editor.selection.select(endNode).collapse(false);
    
    // insert your content
    editor.selection.setContent("abc");
    

    You can use the API docs to actually make it work. What I wrote above is based strictly on the docs - as I don't have the time now to test it -, so it probably won't be plug and play.