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);
})();
3

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.