Editor.md二次开发markdown在线编辑器

Z时代
2024-01-10
分类：综合

python

需求分析

经常需要在网络论坛发布文章进行宣传良心工作室最新免费服务，但每个论坛的编写格式存在差异，给发布带来了很大的障碍。

最近markdown格式的兴起，给广大发布者带来了福音，一种文档格式大部分网站都支持，一次编写即可在多个论坛上发布。

如何在线编写markdown就成为一种需求。

markdown编辑器调研">markdown编辑器调研

经过查找和对比，发现editor.md是一款开源的markdown编辑器，非常的不错，实例丰富，使用比较简单。

editor.md 经过实际测试，发现几个小问题:

自定义工具栏
添加自己需要的内容非常有帮助

无法快速移动光标到文档尾
如果文档比较大，想要移动到文档尾部，比较麻烦

无法上传图片
需要配置服务端php才能支持

无法复制粘贴图片进行上传
这个功能非常的有用

在线markdown文档编辑器

打造在线markdown编辑器

自定义工具栏

增加如下三个配置，即可在工具栏增加html代码

toolbarIcons : function() {

var toolBarIconArray=editormd.toolbarModes["full"];

toolBarIconArray.push("aboutus");

return toolBarIconArray;

自定义html代码

toolbarCustomIcons : {

aboutus :"<a href="http://u.720life.cn/s/75244496" target="_blank" onclick="window.location.href="http://u.720life.cn/s/75244496"">交流Q群:1142802013 "

editor.md 快速移动光标

在研究editor.md功能后，发现有移动光标功能，可以指定移动光标到多少行，使用起来稍微复杂一些，需要用户自己输入

editormd.js 中增加gfirst,glast
full: [ "undo", "redo", "|", "gfirst", //新添加 "glast", //新添加 "|",

添加描述信息，鼠标放上去时的说明
toolbar: {
undo: "撤销（Ctrl+Z）",
redo: "重做（Ctrl+Y）",
gfirst: "回到顶端",
glast: "到底端",
bold: "粗体",

图标的定义
toolbarIconsClass: {
undo: "fa-undo",
redo: "fa-repeat",
gfirst: "fa-arrow-up",
glast: "fa-arrow-down",
bold: "fa-bold",

具体实现功能代码
editormd.toolbarHandlers = {
undo: function() {
this.cm.undo()
},
redo: function() {
this.cm.redo()
},
gfirst: function() {
this.gotoLine("first")
},
glast: function() {
this.gotoLine("last")
},

注意: 最开始以为 gotoLine是 this.cm.gotoLine的函数，但这样总报错，最终发现cm下的函数应该是 libcodemirrorlibcodemirror.js 下面的，因此直接写this.gotoLine即可

文件上传功能修改

支持绝对路径返回
php/upload.php

	$path     = getcwd() . DIRECTORY_SEPARATOR;
	//$url      = dirname($_SERVER["PHP_SELF"]) . "/";
	$url = $_SERVER["REQUEST_SCHEME"] ."://".$_SERVER["HTTP_HOST"] . "/";
	//按照月份进行记录
	$_time = date("Ym");
	//用户是否是免费用户 免费用户free 付费用户pay_token
    $savePath = $path . "../../uploads/free/";
    // 创建images 目录
    if (!file_exists($savePath)) mkdir($savePath);
    $savePath = $savePath . $_time.DIRECTORY_SEPARATOR;
    // 创建月份 目录
    if (!file_exists($savePath)) mkdir($savePath);
    $saveURL  = $url . "uploads/free/".$_time.DIRECTORY_SEPARATOR;

保存文件路径失败的修改
php/upload.php
$imageUploader = new EditorMdUploader($savePath, $saveURL, $formats["image"], 1, "H_i_s");

浏览器js读取剪切板图片上传到服务器

document.addEventListener("paste", function (e) {
    var cbd = e.clipboardData;
    var ua = window.navigator.userAgent;
    // 如果是 Safari 直接 return
    if ( !(e.clipboardData && e.clipboardData.items) ) {
        return;
    }
    // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome/(d{2})/i)[1]) < 49){
        return;
    }
    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i];
        if(item.kind == "file"){
            var blob = item.getAsFile();
            if (blob.size === 0) {
                return;
            }
            // blob 就是从剪切板获得的文件 可以进行上传或其他操作
			var data = new FormData();
	        data.append("blob", blob);
	        $.ajax({
				url : "php/blob_upload.php",
				type : "POST",
				cache : false,
				data : data,
				processData : false,
				contentType : false,
				success : function(result){
				var   json = (typeof JSON.parse !== "undefined") ? JSON.parse(result) : eval("(" + result + ")");
					if(json.success == 1){
					   //上传成功
					   testEditor.cm.replaceSelection("![](" + json.url + ")");
					}
				}
	        });
        }
    }
}, false);