Fire keyPressEvent in tinyMce

Question

I am setting up tinyMCE in Moodle (e-learning). I added a toolbar button that focuses on the text area and adds two dollar signs to it. I need to position the cursor between these characters so that the user can start typing between them. Probably the best approach is to just press the soft left arrow programmatically, right? But I can’t figure out how to do this. Here is the code:

tinyMCE.init({ mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "mybutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", plugins : 'inlinepopups', setup : function(ed) { // Add a custom button ed.addButton('mybutton', { title : 'My button', image : 'img/example.gif', onclick : function() { ed.focus(); ed.selection.setContent('$$'); } }); } 

}); Thanks

Answer 1

This should do what you want:

 ed.addButton('mybutton', { title : 'My button', image : 'img/example.gif', onclick : function() { ed.focus(); ed.selection.setContent('$<span id="my_marker">\u200b</span>$'); var $marker = $(ed.getBody()).find('#my_marker'); ed.selection.select($marker.get(0)); $marker.remove(); } }); 

Answer 2

You can fire a keypress event using the following snippet.

 var e = jQuery.Event('keypress'); e.keyCode = 37; //Left arrow keycode $(document).trigger(e); 

Use may be something like

 onclick : function() { ed.focus(); ed.selection.setContent('$$'); var e = jQuery.Event('keypress'); e.keyCode = 37; //Left arrow keycode $(document).trigger(e); }