Demand analysis

It is often necessary to publish articles in online forums to publicize the latest free services of Conscience Studio, but the format of each forum is different, which brings great obstacles to publishing.

Publishers have been blessed with the recent rise of the Markdown format, a document format that is supported by most websites and can be published in multiple forums at once.

How to write markdown online became a requirement.

Markdown editor research

After searching and comparing, editor.md is an open source Markdown editor. It is very good, with rich examples and easy to use.

Editor. md has been tested and found several small problems:

  • Customize toolbars

It’s very helpful to add what you need

  • Unable to quickly move cursor to end of document

If the document is large and you want to move it to the end of the document, it can be difficult

  • Unable to upload pictures

Server PHP needs to be configured to support this

  • Unable to copy and paste images for uploading

This feature is very useful

Online Markdown document editor

Online Markdown document editor

Build an online Markdown editor

Customize toolbars

Add the following three configurations to add HTML code to the toolbar

toolbarIcons : function() { var toolBarIconArray=editormd.toolbarModes[“full”]; toolBarIconArray.push(“aboutus”); return toolBarIconArray; },

Customize THE HTML code toolbarCustomIcons:

Editor. md Moves the cursor quickly

After exploring the editor.md function, I found that there is a move cursor function that specifies how many lines to move the cursor to, which is slightly more complicated and requires user input

  1. Added gfirst,glast to editormd.js

Full: [" undo "and" redo ", "|", "gfirst", / / new add "glast", / / new add "|",

  1. Add the description, the description when the mouse is up

    Toolbar: {undo: “Undo (Ctrl+Z) “, redo (Ctrl+Y), gfirst:” Back to top “, glast: “Bottom “, bold:” Bold “,

  2. Definition of ICONS

    toolbarIconsClass: { undo: “fa-undo”, redo: “fa-repeat”, gfirst: “fa-arrow-up”, glast: “fa-arrow-down”, bold: “fa-bold”,

  3. Specific implementation of the function code

    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 = this.cm.gotoLine = this.cm.gotoLine = this.cm.gotoLine = this.cm.gotoLine = this.cm.gotoLine = this.cm.gotoLine = this.cm.gotoLine = this.cm.gotoLine = this.cm.gotoLine = this.cm.gotoLine = this.cm.gotoLine

The file upload function is modified

  • Absolute path return is supported

php/upload.php

	$path     = getcwd() . DIRECTORY_SEPARATOR;
	//$url = dirname($_SERVER['PHP_SELF']) . '/';
	$url = $_SERVER["REQUEST_SCHEME"].': / /'.$_SERVER['HTTP_HOST'].'/';
	// Record by month
	$_time = date('Ym');
	// Whether the user is a free user Free user Free paid user pay_token
    $savePath = $path . '.. /.. /uploads/free/';
    // Create the images directory
    if(! file_exists($savePath)) mkdir($savePath);
    $savePath = $savePath . $_time.DIRECTORY_SEPARATOR;

    // Create the month directory
    if(! file_exists($savePath)) mkdir($savePath);

    $saveURL  = $url . 'uploads/free/'.$_time.DIRECTORY_SEPARATOR;
Copy the code
  • Failed to save file path modification

php/upload.php $imageUploader = new EditorMdUploader($savePath, $saveURL, $formats['image'], 1, 'H_i_s');

Browser JS reads clipboard images and uploads them to the server

document.addEventListener("paste".function (e) {
    var cbd = e.clipboardData;
    var ua = window.navigator.userAgent;

    // If it is Safari, return
    if ( !(e.clipboardData && e.clipboardData.items) ) {
        return;
    }
    
    // Mac Chrome49 following copy Finder Bug Hack removed
    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 is a file retrieved from a clipboard that can be uploaded or otherwise operated on
			
			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) {// Upload succeeded
					
					   testEditor.cm.replaceSelection(! "" [] (" + json.url + ")"); }}}); }}},false);		
			
Copy the code

Put the code into the HTML page to achieve the function, now confirm that Chrome and Firefox can support, you can use wechat, QQ, Win7 own screenshots for screenshots copy, paste directly on the page

The final markdown online document editor

Online Markdown document editor

Official QQ exchange

If you have any questions, please join the official Q group discussion

Official exchange Q group :1142802013

The article is from bbs.720life.cn/thread-87.h…