4

I use Markdown in my posts, and the plugin I use for that purpose requires the Visual editor be disabled.

The HTML editor is pretty much just a text box. To make writing easier, I would like to enable some custom keyboard shortcuts that allow me to format text in markdown when a key combination is pressed (like Ctrl + B). How do I do this?

Basically, I just want some of the keyboard shortcuts that work in Wordpress.StackExchange.com's post editor. And they are...

  • Ctrl + B → **Bold Text**

  • Ctrl + I → _Italic Text_

  • Ctrl + Q → > Block Quote

    • The above should work even if there are multiple lines of quoted text)
  • Ctrl + K

    • wrap inline-text with `

    • indent each line by four spaces if there are multiple lines

PS: I don't know JavaScript or PHP, so please try to be as much clear as possible. Thanks.

  • WP-Markdown does this - but requires the TinyMCE editor to be disabled - is this what you're after? – Stephen Harris Apr 19 '12 at 12:14
  • @StephenHarris I already have TinyMCE disabled. While it would be great to have the toolbar in WP-Markdown, I would do fine with just the keyboard shortcuts as well – its_me Apr 19 '12 at 12:32
6
+50

The toolbar / editor used on Stack Exchange websites (and in my plug-in WP-MarkDown) is PageDown.

This comes with three JavaScript files:

  • One that handles MarkDown to HTML conversion
  • One that handles sanitization
  • One that handles the editor (the toolbar and previewer)

Included in the latter are the MarkDown keyboard shortcuts you mentioned.

The following hasn't been tested, but just aims to give an outline of what you need to do.

Step 1: Register & Enqueue JavaScript and styles

To get this to work on the WordPress editor first register and enqueue the above scripts (point to the correct location in your plug-in). (I'm not sure if you need to register scripts when they have dependencies prior to en-queuing them)

Since this is only for the admin we use admin_enqueue_scripts. You'll also want to check

  • We are on the correct admin page
  • The post type (in case MarkDown is only enabled for a certain post type)

Also, a function is hooked onto the admin footer. This will print JavaScript in the footer. (You could put it in a separate file, register it and enqueue it here, but it needs to be loaded after the script for the bog standard WordPress toolbar is loaded). Hence the priority number: 100.

add_action('admin_enqueue_scripts', 'wpse49449_admin_scripts',10,1);
function wpse49449_admin_scripts($hook){
    $screen = get_current_screen();
    $post_type = $screen->post_type;

        //Enqueue only on page needed and only for the relevant post type
        if ( ('post-new.php' == $hook || 'post.php' == $hook) && $post_type == 'post' ){
             $plugin_dir = plugin_dir_url(__FILE__);
             wp_register_script('my_md_convert', $plugin_dir. 'js/pagedown/Markdown.Converter.js',array(),'1.1' );
             wp_register_script('my_md_sanit', $plugin_dir.'js/pagedown/Markdown.Sanitizer.js',array(),'1.1' );
             wp_register_script('my_md_edit',$plugin_dir. 'js/pagedown/Markdown.Editor.js',array('my_md_convert','my_md_sanit'),'1.1' );

             wp_enqueue_script('my_md_edit');
             wp_enqueue_script('jquery');

             wp_enqueue_style('my_md_style',$plugin_dir.'css/demo.css');

             add_action( 'admin_print_footer_scripts', 'wpse49449_admin_footers_script',100 );
    }
}

Step 2: Disable TinyMCE editor where appropriate

The TinyMCE will need to be disabled. But only disable it for post types where you are using the MarkDown editor. To disable the TinyMCE editor:

add_filter( 'user_can_richedit', 'wpse49449_disable_tinymce_editor'), 99 );
function wpse49449_disable_tinymce_editor(){
    //Get post type
    $screen = get_current_screen();
    $post_type = $screen->post_type;

    //Disable depending on post type

    //Return 'false' to disable TinyMCE, 'true' otherwise. 
    return false;
}

Step 3: Replace the 'standard' editor toolbar with the MarkDown toolbar

As noted above the function wpse49449_admin_footers_script prints some JavaScript in the footer. It

  • adds the 'preview' box after the text editor, #wp-content-editor-container
  • replaces the default toolbar #ed_toolbar with the MarkDown toolbar.
  • initializes the MarkDown->HTML converter
  • initializes the MarkDown editor

The function:

  function wpse49449_admin_footers_script(){
    ?> <script>

    jQuery(document).ready(function($) {                
        $('#wp-content-editor-container').after("<div id='wmd-previewcontent' class='wmd-panel wmd-preview prettyprint'></div>");

        $('#ed_toolbar').html("<div id='wmd-button-barcontent'></div>");

        var converter = new Markdown.getSanitizingConverter();
        var editor = new Markdown.Editor(converter, 'content');
        editor.run();
    });
    </script>
     <?php
    }

That should get you started :).

Step 4 Editor.js 'workaround'

The JavaScript file Markdown.Editor.js assumes that the text area ID will be "wmd-input" + postfix where postfix is a variable set as 'content' in this line in step 3:

var editor = new Markdown.Editor(converter, 'content');

The problem is that the ID of the textarea is content not wmd-input. We don't want to change the ID of the textarea, so instead we can alter the function responsible for telling the MarkDown editor the IDs of the toolbar, preview and text area (around line 249 I believe). We change this:

function PanelCollection(postfix) {
    this.buttonBar = doc.getElementById("wmd-button-bar" + postfix);
    this.preview = doc.getElementById("wmd-preview" + postfix);
    this.input = doc.getElementById("wmd-input" + postfix);
};

to this:

function PanelCollection(postfix) {
    this.buttonBar = doc.getElementById("wmd-button-bar" + postfix);
    this.preview = doc.getElementById("wmd-preview" + postfix);
    this.input = doc.getElementById(postfix);
};
-2

I'm not sure how to get ctrl + b and other button combinations to work but here is a list of the shortcuts for the HTML section:

  • Bold: Alt+SHIFT+b
  • Italics: Alt+SHIFT+i
  • Blockquote: Alt+SHIFT+q
  • Strikethrough: Alt+SHIFT+d
  • Code: Alt+SHIFT+c
  • Link: Alt+SHIFT+a
  • Unordered List (ul): Alt+SHIFT+u
  • Ordered List (ol): Alt+SHIFT+o
  • Insert date/time: Alt+SHIFT+s
  • Insert IMG URL: ALT-SHIFT-m
  • Line Break: SHIFT+Enter
  • List Item (li): Alt+SHIFT+l
  • Undo: CTRL+z
  • Redo: CTRL+y
  • Read More: Alt+SHIFT+t
  • Publish the Post: Alt+SHIFT+p
  • 1
    you don't seem to have understood my question. I wanted to add custom buttons that when pressed add custom code -- i.e. Markup code, NOT HTML code. – its_me Apr 19 '12 at 0:48

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.