博客动态
Hi!欢迎来到Jerry Coding!公众号垃圾分类增加学习功能,关注下面的公众号一起来帮助Jerry学习更多垃圾分类知识吧!
微信扫码

扫一扫关注我

More
关于
New
RSS

Markdown 在线编辑工具集成

2020年4月9日 Jerry 934 2020年7月21日

网站集成开源组件 markdown.md 实现在线markdown编辑器的集成,此外,添加 html转换 markdown 的小功能,实现网址到markdown语法的一键转换。

前言

看过我之前建站历程的朋友应该都知道,我的网站博客发表使用的是ckeditor富文本编辑器,并没有使用markdown语法,那为什么搞个在线编辑器呢?主要下面几个原因:

1、偶尔也会用到markdown编辑器,做法也和大家一样,百度一个拿来就用,不是很方便。

2、看到 tendcode 大神搞了个markdown的在线编辑器,挺好玩的。

3、在 csdn 发表个文章需要markdown编辑,把我写过的文章发到csdn需要重新编辑。

4、无聊!

于是,就想试着搞一个markdown在线编辑器。

开搞

其实呢,代码不多,思路也比较清晰。这里用的是 editor.md 开源组件,具体详细信息可以参考 官方指导

里面有许多示例,大家可以在集成的时候参考 简单示例如果集成失败了就 F12 打开控制台找缺什么文件就可以了。或者直接下载工程源码整个文件夹进行添加。代码基本就是简单示例的源码:

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../css/editormd.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />

<div id="layout">
            <header>
                <h1>Simple example</h1>
            </header>
            <div id="test-editormd">
                <textarea style="display:none;">[TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;


</textarea>
            </div>
        </div>


<script src="js/jquery.min.js"></script>
<script src="../editormd.min.js"></script>
<script type="text/javascript">
var testEditor;

$(function() {
	testEditor = editormd("test-editormd", {
		width   : "90%",
		height  : 640,
		syncScrolling : "single",
		path    : "../lib/"
	});
		
	/*
	// or
	testEditor = editormd({
		id      : "test-editormd",
		width   : "90%",
		height  : 640,
		path    : "../lib/"
	});
	*/
});
</script>

html2markdown

基于上面的第三条原因(想把写好的文章复制发到csdn网站上),萌生了搞个一键转换markdown的想法。

这里用到的一个非常好用的轮子 html2text GitHub地址:https://github.com/Alir3z4/html2text/    它可以方便的将html文档转化为Markdown 语法。

>>> import html2text
>>>
>>> print(html2text.html2text("<p><strong>Zed's</strong> dead baby, <em>Zed's</em> dead.</p>"))
**Zed's** dead baby, _Zed's_ dead.

接下来就好办啦!将前台输入的 网址URL 传到后台,后台调用这个神器借口转化一下,最后将结果返回前端就OK啦!于是好用的网页版的 html2markdown 一键转换工具就诞生了。

输入网址实现一键转换,注意网址格式是带 "http://" 或者 "https://"

原网页格式:

一件转换后格式:

由于网页格式复杂,转换后的markdown语法未必直接可用,需要微调。不过在我看来已经够方便了~!

问题

处理过程种有一个简单的问题刚开始没有想到处理方法,就是  ajax 获取后端 返回信息后 如何刷新 markdown编辑框呢?

最后看到了 editor.md 示例中的  动态创建   想到了一个简单的处理办法:在获取到正确的markdown内容后,先将原来的markdown编辑器销毁,再根据新的内容动态创建新的markdown编辑器:

<script src="js/jquery.min.js"></script> 
<script type="text/javascript">
var testEditormd;

$(function() {                
    $("#create-btn").click(function(){                    
        $.getScript("../editormd.js", function() {
            $("#layout").append("<div id=\"test-editormd\"></div>");
            
            testEditormd = editormd("test-editormd", {
                width: "90%",
                height: 640,
                markdown : "### 动态创建 Editor.md\r\n\r\nDynamic create Editor.md",
                path : '../lib/'
            });
        });
    });  
    
    $("#remove-btn").click(function() {
        testEditormd.editor.remove();
    });
});
</script>

最后,附上,

工具地址:https://jerrycoding.com/tool/online/markdown/

工具说明:https://jerrycoding.com/tool/markdown/


原创文章,转载请注明出处: https://jerrycoding.com/article/markdown

微信
支付宝

您尚未登录,暂时无法评论。请先 登录 或者 注册

0 人参与 | 0 条评论

每日一句 (From ONE)
人一出生,就会慢慢长大,品尝人生的滋味,怀抱无限的希望,然后就是死亡的降临。无论男女,永远都不能死而复生。尽管如此,人们依然抱着“长生不死”的幻想。其实,人类只是茫茫宇宙一个小小的天地,转眼间就会灰飞烟灭,化为培育新芽的养料。花草树木、飞禽走兽、芸芸众生、点点星辰以及大千世界,都会在获得生命之后走向死亡,然后转化成别的什么。
微信扫码

扫一扫关注我

关于本站