Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
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
add comment

2 Answers 2

up vote 6 down vote accepted
+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);
};
share|improve this answer
    
Note To Me For Step 2: add_filter( 'user_can_richedit' , '__return_false', 50 ); — completely disables Visual Editor everywhere. –  its_me Jul 25 '12 at 20:16
add comment

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
share|improve this answer
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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