2

I would like to have the same WYSIWYG markdown editor as the one on Stack Exchange's websites.

http://pix.toile-libre.org/upload/original/1452122288.png

The most wanted feature is the keyboard shortcuts like ctrl+k to add backticks around selection, ctrl+l to make links and so on. I'm pretty sure that will interest many people using github all the day long.

I saw the post from 2008 (yes, it's far now) from Jeff Atwood itself explaining that Stack Exchange websites use WMD editor.

As seen there, the project becomes pagedown, but I don't know how to use it in a browser (Firefox at least) for a known list of websites. (It's super easy for a owned web site to integrate the lib, but what about in a script to enable it where we want ? )

As a workaround usable on , I can use the external editor stackedit to open the textarea, but I prefer to have the editor directly in the web page. And as related there, StackEdit connects to Google Analytics, Google Drive, Dropbox, Bit.ly, Wordpress, Tumblr and probably some other ones.

  • It's all here as far as I can see. – Shadow The Princess Wizard Jan 6 '16 at 23:40
  • 1
    @ShadowWizard Balpha's copy is at github.com/balpha/pagedown, to eventually be moved to live under the SE org on Github. I don't know who maniator is, but just be aware that that version of the code might not be entirely up to date going forward. – Adam Lear Jan 7 '16 at 6:25
  • Thanks for clarifying @Adam, for some reason when I searched I landed on that page - don't remember my exact search route though. maniator appears to be this user, if it matters. – Shadow The Princess Wizard Jan 7 '16 at 7:53
  • 3
    Nitpick: that isn't a WYSIWYG editor at all! It's a plaintext Markdown editor with keyboard shortcuts and a preview pane. – Alexis King Jan 7 '16 at 8:30
4

I don't think this is really at all possible. I guess you could do a user script to override Github's editor with PageDown... but our markdown flavor isn't entirely compatible with Github's markdown, so you'd be shooting yourself in the foot if you did so.

It's even worse for Slack:

We're aware that some users would like to see enhanced Markdown options, but we don’t currently plan to support Markdown in Slack messages.

In other words, at the end of the day, the editor we have is suitable for hosting on a website, but it's not designed or intended to be a browser extension that is usable on other sites.

  • For slack, I'm just interested for the beyboard shortcut ctrl+k to format code. I guess that I should implement my own userscript using by example markitup.jaysalvat.com (I don't care about the buttons) – Gilles Quenot Jan 7 '16 at 8:11
4

As I said, the most wanted feature is the keyboard shortcuts. I wrote a userscript tested both on firefox 43.0.1 (need addon) and chromium Version 47.0.2526.106 (need addon).

Enabled sites :

  • https://*.slack.com/*
  • https://github.com/*
  • https://gist.github.com/*

Enabled keyboard shortcuts :

  • ctrl+b : bold
  • ctrl+i : emphasis
  • ctrl+k : code
  • ctrl+l : link

https://gist.github.com/c6cbcc061d8257cbbd67

// ==UserScript==
// @name        SO_like_keyboards_shortcuts
// @namespace   sputnick
// @include     https://github.com/*
// @include     https://gist.github.com/*
// @include     https://*.slack.com/*
// @include     https://stackoverflow.com/*
// @include     hhttps://serverfault.com/*
// @include     https://*stackexchange.com/*
// @include     https://askubuntu.com/*
// @include     https://superuser.com/*

// @version     1
// @grant       none
// ==/UserScript==

// http://meta.stackexchange.com/a/272565/203970
// TODO need to work with gist

var id, name;
if (document.location.href.search(/gist\.github\.com/) > 0 ) { //TODO to be fixed
    id = '#blob_contents';
    name = 'gist';
}
else if (document.location.href.search(/github\.com.*new$/) > 0 ) {
    id = '#issue_body';
    name = 'github';
}
else if (document.location.href.search(/github\.com\/.*\/issues\/[0-9]+/) > 0 ) {
    id = '#new_comment_field';
    name = 'github';
}
else if (document.location.href.search(/slack\.com/) > 0 ) {
    id = '#message-input';
    name = 'slack';
}
else if (document.location.href.search(/(stackoverflow|stackexchange|superuser|askubuntu|serverfault)/) > 0 ) {
    id = '[id^=wmd-input]';
    name = 'stack';
}

(function() {
    document.addEventListener('keydown', function(e){
        //window.alert(e.which);

        if (document.activeElement.tagName == "TEXTAREA") {
            // ctrl+0 [tag:]
            if (e.ctrlKey && e.which == 96) {
                override(e);
                wrapText(id, '[tag:', ']');
            }
            // ctrl+b: bold
            if (e.ctrlKey && e.which == 66) {
                override(e);
                if (name == 'slack') { wrapText(id, '*', '*'); }
                if (name == 'github' || name == 'gist') { wrapText(id, '**', '**'); }
            }
            // ctrl+i: emphasis
            if (e.ctrlKey && e.which == 73) {
                override(e);
                wrapText(id, '_', '_');
            }
            // ctrl+k: code
            if (e.ctrlKey && e.which == 75) {
                override(e);
                wrapText(id, '`', '`');
            }
            // ctrl+l: link
            if (name !== 'stack' && e.ctrlKey && e.which == 76) {
                override(e);
                var p = window.prompt("Link paste bellow");
                wrapText(id, '[', ']('+p+')');
            }
        }
    }, true);
})();

function wrapText(elementID, openTag, closeTag) {
    var textArea = document.querySelector(elementID);
    var len = textArea.value.length;
    var start = textArea.selectionStart;
    var end = textArea.selectionEnd;
    var selectedText = textArea.value.substring(start, end);
    if (openTag == '`' && selectedText.search(/\n/) > 0 ) {
        openTag = '```\n';
        closeTag = '\n```';
    }
    var replacement = openTag + selectedText + closeTag;
    textArea.value = textArea.value.substring(0, start) + replacement + textArea.value.substring(end, len);
}

function override(e) {
    e.stopImmediatePropagation();
    e.cancelBubble = true;
    e.preventDefault();
}

  • Updated code from post and gist – Gilles Quenot Mar 5 '18 at 21:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .