1

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:

   <?php
    /*
    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.