文档章节

像简书那样将粘贴的链接自动转换为Markdown格式

樂天
 樂天
发布于 2016/10/07 14:33
字数 581
阅读 205
收藏 1

参考 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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Paste as Markdown</title>
    <link href="//cdn.bootcss.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        textarea {
            width: 100%;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <h1>复制粘贴为Markdown格式</h1>
        <hr/>
            <p>这是一段文本</p>
            <p><a href="/bundle.js">Link One</a></p>
            <p><a href="https://github.com/letiantian">Link Two</a></p>
            <p><img src="./art.png" /></p>
        <hr/>
        <p>
            <button id="addText" class="btn-primary">在光标位置添加文本</button>
        </p>
        <textarea id="content">Paste</textarea>
    </div>
    <div class="col-md-3"></div>
</div>

<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="./bundle.js"></script>
</body>
</html>

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 = '<div>' + data + '</div>';   // let find() run
    var dataDom = $(data);
    dataDom.filter('script').remove();
    dataDom.filter('style').remove();

    // process <a></a>
    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 <img/>
    dataDom.find('img').each(function(idx, item) {
        console.log('find an img');
        var url = $(item).attr("src");
        var content = '';
        $(this).after('<span>!['+content+'](' + url + ')</span>');
    });

    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 + '&#13;&#10;');  // 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);

© 著作权归作者所有

樂天

樂天

粉丝 138
博文 680
码字总数 153018
作品 3
深圳
程序员
私信 提问
MarkDown转Html在线转换(支持代码高亮,可复制到公众号、今日头条)

MarkDown/Html在线转换能够将md渲染成html并且能保持代码高亮,可以方便的复制待格式的html粘贴到公众号,CSDN,简书,博客园,开源中国等。 扫码体验在线助手小程序 我是java代码 我是html代...

陈守印
2018/10/17
138
0
简书文章发布到GitHub

简书对markdown的支持非常好,而github恰好也是非常鼓励使用markdown格式,这次我们尝试将简书的文章,搬到GitHub平台. 我以前在简书发布过的一篇"图虫遇爬虫",这篇文章有代码,有内容,很适合迁移...

_昭昭_
2017/12/10
0
0
简书 Markdown 语法详解

注: 文章摘自 白老师课堂 - 简书 一、区块标记 区块标记:是指内容独占一块,需前后换行,不和其他标记共处一行的标记 1. 段落 段落:即是一段连续的文字,可包含 * 、空格、换行、tab 等字符...

小贤笔记
2018/08/16
0
0
简书到Github, Python一键迁移脚本

简书天然支持Markdown格式, 而Github仓库中的README.md也天然支持Markdown格式 简书后台支持一键下载所有写过的Markdown的文章, Github提供了脚本创建仓库的Api 我们从简书后台获取所有写过的...

木子昭
2018/05/15
0
0
博客平台、Markdown编辑器与hexo admin简介

今天来介绍下一些博客平台,顺带也介绍几个笔者用过的Markdown编辑器,以及最近刚刚开始使用的博客后台管理的神器hexo-admin。 1 博客平台 关于如何写博客这个事情确实是一件比较有意思的事情...

胖胖雕
2018/09/19
267
0

没有更多内容

加载失败,请刷新页面

加载更多

DDD(十)--仓储

1、引言 DDD中的Repository(仓储):协调领域和数据映射层,利用类似与集合的接口来访问领域对象。——《领域驱动设计-软件核心复杂性应对之道》 仓储是DDD中产生的概念,也就是说,如果应...

MrYuZixian
13分钟前
5
0
Jenkins的多种迁移方法

说明 Jenkins有时需要进行迁移,主目录会发生改变,本文主要讲解如何更改主目录。由于jenkins安装方式的不同,主目录也不一样。 本测试环境:Centos7.6 X64。注意:在更改主目录之前,请一定...

Elson
14分钟前
5
0
好程序员web前端教程分享前端javascript练习题三

好程序员web前端教程分享前端javascript练习题三,cookie 一周内免登录 样式代码: <form action=""> 姓名:<input type="text" id="usename"/><br /> 密码:<input type="text" i="mima"/>......

好程序员官网
33分钟前
5
0
Table 信息转成pojo属性

import com.google.common.base.CaseFormat;import java.sql.*;/** * @author: liyhu * @date: 2019/11/22 */public class TableToPojo { static String url="jdbc:mys......

暗中观察
今天
8
0
Access数据库-C#操作类

//Access数据库-C# 操作类 代码using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Data.OleDb;using System.Data;namespace XXX{......

芳缘
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部