I have created a shortcode and TinyMCE plugin for a shortcode. Click the button, it inserts [my-shortcode][/my-shortcode].

But it adds the code and then the editor cursor is after the closing shortcode. I want to type content inside this shortcode, so I need to click the cursor between the ][ every time.

Is there a way to position the cursor in the button js so that when the shortcode is added, the cursor is in my desired spot?

Yes, I have also set the shortcode to wrap text if there is an active selection, but what if I want to add content after adding the shortcode?

Plugin code:

    Plugin Name: PB Doc Lede
    Description: Provides shortcode to wrap text in a DIV doc-lede
    Author: Steve Lombardi
    /* Start Adding Functions Below this Line */

    function pb_doc_lede($atts, $content = null)
        $processedContent = do_shortcode($content);
        return '<div class="doc-lede">' . $processedContent . '</div>';
    add_shortcode('pbdoclede', 'pb_doc_lede');

    function add_doc_lede_plugin($plugin_array)
        $plugin_array['doc_lede_plugin'] = plugin_dir_url(__FILE__) . 'index.js';
        return $plugin_array;

    add_filter("mce_external_plugins", "add_doc_lede_plugin");

    function register_doc_lede_button($buttons)
        //register buttons with their id.
        array_push($buttons, "dsdoclede");
        return $buttons;

    add_filter("mce_buttons", "register_doc_lede_button");


TinyMCE code

 (function() {
  tinymce.create("tinymce.plugins.doc_lede_plugin", {
    //url argument holds the absolute url of our plugin directory
    init: function(ed, url) {
      //add new button
      ed.addButton("dsdoclede", {
        title: "Add Doc Lede Block",
        cmd: "doc_lede_command",
        image: "//cdn.designsystem.pitneycloud.com/icons/playlist.svg"

      //button functionality.
      ed.addCommand("doc_lede_command", function() {
        var selected_text = ed.selection.getContent();
        var return_text = "[pbdoclede]" + selected_text + "[/pbdoclede]";
        ed.execCommand("mceInsertContent", 0, return_text);

    createControl: function(n, cm) {
      return null;

    getInfo: function() {
      return {
        longname: "Extra Buttons",
        author: "Steve Lombardi",
        version: "1"

  tinymce.PluginManager.add("doc_lede_plugin", tinymce.plugins.doc_lede_plugin);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.