2019独角兽企业重金招聘Python工程师标准>>> 
参考 JavaScript get clipboard data on paste event (Cross browser)和Insert text into textarea at cursor position (Javascript)实现了基本的功能，可以像简书那样将粘贴的链接自动转换为Markdown格式。在Chrome 51测试。未做其他的兼容性测试。
效果如下：
代码结构
源码
见 https://github.com/letiantian/paste-as-markdown
这里贴下源码：
index.html
Paste as Markdown
bundle.js
var editableTextArea = document.getElementById('content');
function handlepaste (e) {
var types, pastedData, savedContent;
// Browsers that support the 'text/html' type in the Clipboard API (Chrome, Firefox 22+)
if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.getData) {
console.log(e.clipboardData);
// Check for 'text/html' in types list. See abligh's answer below for deatils on
// why the DOMStringList bit is needed. We cannot fall back to 'text/plain' as
// Safari/Edge don't advertise HTML data even if it is available
types = e.clipboardData.types;
if (((types instanceof DOMStringList) && types.contains("text/html")) || (types.indexOf && types.indexOf('text/html') !== -1)) {
// Extract data and pass it to callback
pastedData = e.clipboardData.getData('text/html');
console.log(pastedData);
typeInTextarea($('#content'), processHtmlData(pastedData));
// Stop the data from actually being pasted
e.stopPropagation();
e.preventDefault();
return false;
}
}
}
function typeInTextarea(el, newText) {
var start = el.prop("selectionStart")
var end = el.prop("selectionEnd")
var text = el.val()
var before = text.substring(0, start)
var after = text.substring(end, text.length)
el.val(before + newText + after)
el[0].selectionStart = el[0].selectionEnd = start + newText.length
el.focus()
return false
}
function processHtmlData(data) {
data = '' + data + ''; // let find() run
var dataDom = $(data);
dataDom.filter('script').remove();
dataDom.filter('style').remove();
// process
dataDom.find('a').each(function(idx, item) {
console.log('find a link');
var url = $(item).attr("href");
var content = $(item).text();
$(this).text('['+content+'](' + url + ')');
});
// process ![]()
dataDom.find('img').each(function(idx, item) {
console.log('find an img');
var url = $(item).attr("src");
var content = '';
$(this).after('');
});
console.log('after process img: ' + dataDom.html());
// process p,h1,h2,...
['p', 'h1', 'h2', 'h3', 'h4'].forEach(function(tag, idx){
dataDom.find(tag).each(function(index, item) {
var content = $(item).html().trim();
if (content.length > 0)
$(this).html(content + '
'); // add new line
});
});
return dataDom.text().trim();
}
// Modern browsers. Note: 3rd argument is required for Firefox <= 6
editableTextArea.addEventListener('paste', handlepaste, false);
// add text button
function processButtonClick() {
typeInTextarea($('#content'), 'Hello, ~');
}
document.getElementById('addText').addEventListener('click', processButtonClick, false);