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.
The toolbar / editor used on Stack Exchange websites (and in my plug-in WP-MarkDown) is PageDown.
This comes with three JavaScript files:
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 checkAlso, 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.
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:
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#wp-content-editor-container
#ed_toolbar
with the MarkDown toolbar.The function:
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
wherepostfix
is a variable set as ‘content’ in this line in step 3:The problem is that the ID of the textarea is
content
notwmd-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:to this:
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: