1. 编程号首页

django markdown编辑器_editor编辑器

编程小号 • • 未分类

django markdown编辑器_editor编辑器editor.md简介editor.md是国内开发的开源项目，单纯基于前端JavaScript，可以实现markdown编辑器的所有功能

1、简介

editor.md是国内开发的开源项目，单纯基于前端JavaScript，可以实现markdown编辑器的所有功能。

主要特性

  • 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可变身为代码编辑器；
  • 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
  • 支持 ToC（Table of Contents）、Emoji表情、Task lists、@链接等 Markdown 扩展语法；
  • 支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
  • 支持识别和解析 HTML 标签，并且支持自定义过滤标签及属性解析，具有可靠的安全性和几乎无限的扩展性；
  • 支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
  • 兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备；

官网：https://pandao.github.io/editor.md/，下载解压后的目录如下图所示：
在这里插入图片描述
说明：

  • css目录中可选择editormd.min.css放在对应的项目css目录中；
  • js可选择editormd.min.js放置在对应项目的js目录中，需要注意的是同时需要引入jQuery，这里使用jquery.min.js；
  • examples文件夹中是一部分核心功能的demo，在使用的过程中用到对应的组件或功能可打开参考；
  • fonts是需要用到字体，可一并引入项目；
  • images是一些加载类的图片；
  • lib是editor.md依赖的第三方js资源，比如流程图的js资源；
  • plugins主要是编辑器上面的操作功能插件，比如图片上传等，可选择使用的进行加载；

在examples文件夹中有一个简单的示例simple.html，源代码为：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>示例</title>
        <link rel="stylesheet" href="../css/editormd.css" />
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>Simple example</h1>
            </header>
            <div id="test-editormd">
                <textarea style="display:none;"></textarea>
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="../editormd.js"></script>
        <script type="text/javascript"> var testEditor; $(function() { 
      testEditor = editormd("test-editormd", { 
      width : "90%", //宽度 height : 640, //高度 syncScrolling : "single", // path : "../lib/", autoFocus:false //页面打开时不自动获取焦点 }); }); </script>
    </body>
</html>

注意

  • <textarea style="display:none;"></textarea>是默认的显示mark文本的区域，默认的name值是test-editormd-markdown-doc，如果想更换名称为content，只需要修改为：<textarea name='content' style="display:none;"></textarea>即可

2、环境搭建

  • 第一步：创建一个Maven形式的Web项目，然后将editor.md解压后的文件全部拷贝到项目的webapp目录下：
    在这里插入图片描述

  • 第二步：将editormd/examples下的simple.html的源代码拷贝到index.jsp，然后调整为：

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="utf-8" />
    <title>示例</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/editormd/css/editormd.css" />
</head>
<body>
<div id="layout">
    <header>
        <h1>editor.md示例</h1>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </header>
    <div id="test-editormd">
         <textarea style="display:none;" class="form-control" id="editormd" name="editormd"></textarea>
    </div>
</div>
<script src="${pageContext.request.contextPath}/editormd/examples/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/editormd/editormd.js"></script>
<script type="text/javascript"> var testEditor; $(function() { 
        testEditor = editormd("test-editormd", { 
        width : "90%", height : 640, syncScrolling : "single", path : "${pageContext.request.contextPath}/editormd/lib/", //这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。 saveHTMLToTextarea : true }); }); </script>
</body>
</html>

代码解释：

  • path：需要指定到项目中对应的lib的路径，如果设置不对markdown 无法渲染出来。
  • saveHTMLToTextarea设置为true表示，转化为html格式的内容也同样提交到后台。
  • 通过form表单提交时后台可通过request.getParameter(“editormd”)获取到对应的markdown文档内容。

注意：

  • 无论需要html格式的内容还是markdown格式的内容，都只需要写一个textarea。此处有一个很大的坑。不少其他教程中说需要两个textarea，那么会导致后一个textarea后台获得的数据是一个数组，而不是单纯的HTML内容。

  • 运行
    在这里插入图片描述
    这样就完成了一个最简单的editor.md的编辑器了，可以在打开的页面书写熟悉的Markdown文档，里面可以包含代码，右侧有实时的预览。

3、实现文件上传

3.1、理该基础

后端返回的报文必须json 格式：

{ 
   
    success : 0 | 1, //0表示上传失败;1表示上传成功
    message : "提示的信息",
    url     : "图片地址" //上传成功时才返回
}

说明：

  • 0,1 必须是数字；
  • url :就是你图片存在的地址，这个就是返回到弹框中的图片地址。

3.2、示例：

  • 第一步：页面代码

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
    <head>
        <meta charset="utf-8" />
        <title>示例</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/editormd/css/editormd.css" />
    </head>
    <body>
    <div id="layout">
        <header>
            <h1>editor.md示例</h1>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        </header>
        <div id="test-editormd">
            <textarea style="display:none;" class="form-control" id="editormd" name="editormd"></textarea>
        </div>
    </div>
    <script src="${pageContext.request.contextPath}/editormd/examples/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/editormd/editormd.js"></script>
    <script type="text/javascript"> var testEditor; $(function() { 
       //Editor初始化： testEditor = editormd("test-editormd", { 
        width : "90%", height : 640, syncScrolling : "single", // theme : "dark", path : "${pageContext.request.contextPath}/editormd/lib/", //依赖lib文件夹路径 //这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单 saveHTMLToTextarea : true, saveHTMLToTextarea : true, // 保存 HTML 到 Textarea，true表示转化为html格式的内容也同样提交到后台 toolbarAutoFixed:true,//工具栏自动固定定位的开启与禁用 imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "${pageContext.request.contextPath}/imageUpload", }); }); </script>
    </body>
</html>

    说明：

    • imageUpload：设置为true表示支持上传，此时需要plugins中的image-dialog.js插件（默认调用，放在指定路径即可）
    • imageFormats：为支持上传的图片类型
    • imageUploadURL：要上传图片的后台服务器路径

  • 第二步：后台处理文件上传的Servlet

    @MultipartConfig    //标识Servlet支持文件上传
@WebServlet(urlPatterns = "/imageUpload")
public class ImageUploadServlet extends HttpServlet { 
     
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
     
        JSONObject res = new JSONObject();
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        String savePath = request.getServletContext().getRealPath("/uploadFile");  //存储路径
        File path = new File(savePath);
        if (!path.exists()) { 
      //如果路径不存在则创建
            path.mkdirs();
        }

        Collection<Part> parts = request.getParts(); //获取上传的文件集合
        if (parts != null && parts.size() == 1) { 
        //上传单个文件
            Part part = request.getPart("editormd-image-file"); //-----① 通过表单file控件(<input type="file" name="file">)的名字直接获取Part对象
            String header = part.getHeader("content-disposition");//获取请求头
            String fileName = getFileName(header);
            String url = savePath + File.separator + fileName;
            part.write(url);           //把文件写到指定路径

            res.put("success", 1);
            res.put("message", "上传成功");
            res.put("url", "http://localhost:8080/EditorMarkDownDemo_war/imageShow?imageFileName=" + fileName);
        } else { 
     
            res.put("success", 0);
            res.put("message", "上传失败");
        }


        PrintWriter out = response.getWriter();
        out.println(res.toJSONString());
        out.flush();
        out.close();
    }

    /** * 根据请求头解析出文件名 * @param header 请求头 * @return 文件名 */
    public String getFileName(String header) { 
     
        String[] temp = header.split(";")[2].split("=");
        //获取文件名，兼容各种浏览器的写法
        String fileName = temp[1].substring(temp[1].lastIndexOf("\\") + 1).replaceAll("\"", "");
        return fileName;
    }
}

    编号①处之所以通过editormd-image-file获取Part的原因如下图所示：
    在这里插入图片描述

  • 第三步：后台处理图片回显的Servlet

    @WebServlet(urlPatterns = "/imageShow")
public class ImageShowServlet extends HttpServlet { 
     
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
     
        String imageFileName = request.getParameter("imageFileName");
        response.setContentType("text/html; charset=UTF-8");
        response.setContentType("image/jpeg");
        OutputStream os = response.getOutputStream();
        String savePath = request.getServletContext().getRealPath("/uploadFile");  //存储路径

        try (FileImageInputStream input = new FileImageInputStream(new File(savePath + File.separator +imageFileName));
             ByteArrayOutputStream output = new ByteArrayOutputStream();) { 
     
            byte[] buf = new byte[1024];
            int len = -1;
            while ((len = input.read(buf)) != -1) { 
     
                output.write(buf, 0, len);
            }
            byte[] data = output.toByteArray();
            os.write(data);
            os.flush();
        } catch (FileNotFoundException ex) { 
     
            ex.printStackTrace();
        }
    }
}

  • 结果：
    在这里插入图片描述
    在这里插入图片描述

3、页面保存

  • 前端页面：

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
    <head>
        <meta charset="utf-8" />
        <title>示例</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/editormd/css/editormd.css" />
    </head>
    <body>
    <div id="layout">
        <header>
            <h1>editor.md示例</h1>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        </header>
        <div id="test-editormd">
            <textarea style="display:none;" class="form-control" id="editormd" name="editormd"></textarea>
            <textarea class="editormd-html-textarea" name="text" id="editormdData"></textarea>
        </div>
    </div>
    <script src="${pageContext.request.contextPath}/editormd/examples/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/editormd/editormd.js"></script>
    <script type="text/javascript"> var testEditor; $(function() { 
       //Editor初始化： testEditor = editormd("test-editormd", { 
        width : "90%", height : 640, syncScrolling : "single", // theme : "dark", path : "${pageContext.request.contextPath}/editormd/lib/", //依赖lib文件夹路径 //这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单 // saveHTMLToTextarea : true, // 保存 HTML 到 Textarea，true表示转化为html格式的内容也同样提交到后台 toolbarAutoFixed:true,//工具栏自动固定定位的开启与禁用 imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "${pageContext.request.contextPath}/imageUpload", }); $("#saveBtn").click(function () { 
        var data = $("#editormdData").val(); //alert(html); $.ajax({ 
        data:{ 
       'data':data}, dataType:'text', type:'post', url:'${pageContext.request.contextPath}/saveData', success:function (msg) { 
        alert(msg); } }) }); }); </script>
    <button id="saveBtn">保存代码</button>
    </body>
</html>

  • 后台Servlet：

    @WebServlet(urlPatterns = "/saveData")
public class SaveDataServlet extends HttpServlet { 
     
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
     
        String data = request.getParameter("data");
        System.out.println(data);
        String savePath = request.getServletContext().getRealPath("/md");  //存储路径
        File file = new File(savePath);
        if(!file.exists()){ 
     
            file.mkdirs();
        }
        FileWriter out = new FileWriter(savePath+"/demo.md");
        out.write(data);
        out.flush();
        out.close();
        response.getWriter().write("success");
    }
}

  • 运行，单击保存按钮，在指定的目录下会找到保存好的文件

4、markdown回显，转HTML

<!-- Editor css... -->
<link rel="stylesheet" href="Editor/css/editormd.css" />
<link rel="stylesheet" href="Editor/css/editormd.preview.min.css" />

<!-- Editor js -->
<script src="js/jquery-1.8.3.min.js"></script>
 <script src="Editor/js/editormd.min.js"></script>
<script src="Editor/lib/marked.min.js"></script>
<script src="Editor/lib/prettify.min.js"></script>


<!-- Editor 容器 -->
<div class="content editormd-preview-theme" id="content">
     <textarea style="display:none;" >${content}</textarea>      
</div>

<!-- Editor markdown转html -->
<script> editormd.markdownToHTML("content",{ 
     emoji:true}); </script>

今天的文章django markdown编辑器_editor编辑器分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/85242.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注