Skip to main content
edited tags
Link
fuxia
  • 107.1k
  • 38
  • 255
  • 459
Added code snippets
Source Link
Steve
  • 313
  • 9
  • 21

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

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);
})();
Source Link
Steve
  • 313
  • 9
  • 21

Custom Shortcode: define cursor position/insertion point?

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?