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)
编程小号编程小号

相关推荐

发表回复

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