《Editor.md文档书写神器-笔录》

简介

Editor.md是编辑书写Markdown的插件。可以帮助我们书写出漂亮的Markdown文档。
下面我介绍使用Editor.md插件，集成到web前端。功能点：

• 1.实现markdown文档编辑器
• 2.实现markdown文档查看器
  使用markdown文档编辑器书写完文档后保存到服务器，然后通过markdown文档查看器去请求服务器获取到之前保存的*.md文档进行浏览查看。掌握了它我们就可以自己去扩展属于自己的文档编辑工具甚至平台。

实现步骤：

• 1.下载Editor.md插件（github下载地址）
  https://pandao.github.io/editor.md/
  
  

  image.png

建议先到官方看下如何使用，避免少走弯路
官方地址 https://pandao.github.io/editor.md/examples/index.html

• 2.集成到项目中
  下载下来解压后是一个npm项目，你可以直接使用 也可以自行再扩展功能，下载依赖modules，再编译构建。这里 我就不重新构建了，需要重新构建的同学如果不清楚如何构建npm项目可以参考我的其它文章《NodeJS开发教程5-包管理工具npm》https://www.jianshu.com/p/445d0168d691
  
  

  image.png

好，接下来我们把下载的Editor.md插件copy到我们的项目，只copy我们用到的文件也可以，或者干脆暴力一点把所有文件都copy到项目（发布版建议去除非依赖文件）我把它copy到了项目的前端插件目录中（并且我重新命了下文件夹的名称：editor.md）：

image.png

• 3.实现markdown文档编辑器
  我在项目的前端目录中创建了 md-editor.html 用来实现markdown文档编辑器：

image.png

md-editor.html文件内容：

    
        
        
        
        
        

    
    
        

            

                
Editor.md-Markdown编辑器
            
            

                保存文档
            
            

                
[TOC]

#MD文档编辑器（爽）

#### 可以显示列表项

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

#### 可以显示目录 directory

    editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/
            editormd.js
            ...
####[TOC]文档目录自动生成

头部引入 '[TOC]' 参考本文档头部，目录索引自动生成，很方便的！


            
        
        
        
        
    
    

• 4.实现服务器存储编辑器内容
  服务器我用的是springboot,当然你也可以用你熟悉的服务器来管理文档内容。

import com.yu.scloud.baseframe.frame.utils.FileOperate;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.ServletRequest;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;

@RestController
public class MDWriterController {

    @RequestMapping("/saveDoc")
    public String saveDoc(String filename, String content, ServletRequest request)
    {
        try {
            File file=getFile("/static/demo/doc/");
            FileOperate.writeFile(file.getAbsolutePath()+filename+".md",content);
            return "保存成功";
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "保存失败";
    }
    private File getFile(String rel) throws FileNotFoundException {
        //获取跟目录
        File path = new File(ResourceUtils.getURL("classpath:").getPath());
        return new File(path.getAbsolutePath(),rel);
    }
    @RequestMapping("/viewDoc")
    public String viewDoc(String filename)
    {
        try {
            File file=getFile("/static/demo/doc/");
            return FileOperate.readFile(file.getAbsolutePath()+filename+".md");
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "";
    }
}

启动服务器访问md-editor.html，编辑好信息后就可以保存文档了：

image.png

文档会保存到你指定的服务器目录中，并命名为：*.md。我这里命名为：test1.md。

• 5.实现markdown文档查看器
  新建 view-md.html 内容如下：

    
        
        
        
        
        
    
    
        

            

                
Markdown转HTML的显示处理
 
                
即：非编辑情况下的HTML预览
                
HTML Preview(markdown to html)
       
            
            

               ###Hello world!               
            
        
        
        
        
        
        
        
        
        
        
        

        
        
    

指定刚刚生成的 test1.md文档资源查看：

image.png

这样我们就实现了简单的文档编辑、上传、以及查看功能，是不是很简单！END。