之前写社区项目的时候用到了editormd，一款很方便的markdown在线编辑器。今天主要教大家 Web项目快速引入Editormd ，一起看看吧。

项目地址

  1. 官方Github地址
  2. 官方演示以及说明地址

项目引入说明

下面教程相关的css和js都是使用Jsdelivr缓存的地址，理论长期有效，测试可以直接复制使用，但是正式环境请到官方仓库下载。

Step 1 : 引入Editormd编辑器

引入示例

以我自己写的editor-in.html为例(复制代码，请自己去掉全局注释）

<!-- 复制代码请去掉这个全局注释
 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>html引入editor markdown在线编辑器</title>
    <!-- 引入相关样式表 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yremp/editormd/css/editormd.css">
    <!-- 引入相关javascript -->
    <script src="https://cdn.jsdelivr.net/gh/yremp/editormd@1.0.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/yremp/editormd/editormd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- textarea 作为编辑器的容器 id="question-desc"和下方的js脚本editormd("question-desc")中id对应 -->
        <div class="form-group" id="question-desc">
                <label for="description">正文</label>
                <textarea name="description" id="description" class="form-control" 
                    cols="30" rows="10" required></textarea></div>
            <script type="text/javascript">
                $(function () {
                    var editor = editormd("question-desc", {
                        // 相关参数设置(部分)
                        width: "100%",
                        height: 400,
                        path: "https://cdn.jsdelivr.net/gh/yremp/editormd/lib/",
                        placeholder: "为了方便直接在线演示，没有截图",
                        emoji: true,
                        imageUpload: true,
                        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        imageUploadURL: "/file/upload"
                    });
                });
            </script>
</body>
</html>
-->

实际效果

如果为下方为空白，刷新页面即可正常显示

html引入editor markdown在线编辑器

Step 2 : 将markdown转化为HTML显示

引入示例

以我的editor-out.html为例

<!-- 复制代码请去掉这个全局注释 
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>html引入editor markdown在线编辑器</title>
    <!-- 引入相关样式表 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yremp/editormd/css/editormd.preview.css" />
    <!-- 引入相关javascript -->
    <script src="https://cdn.jsdelivr.net/gh/yremp/editormd@1.0.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/yremp/editormd/editormd.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/yremp/editormd/lib/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/yremp/editormd/lib/prettify.min.js"></script>
</head>
<body>
        <div id="description">
                <!-- Server-side output Markdown text -->
                <textarea style="display:none;">#### 内容请结合实际，可以从数据库读取</textarea>             
            </div>
        <script type="text/javascript">
            $(function() {
                var testView = editormd.markdownToHTML("description", {
                    // markdown : "[TOC]n### Hello world!n## Heading 2", // Also, you can dynamic set Markdown text
                    // htmlDecode : true,  // Enable / disable HTML tag encode.
                    // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
                });
            });
        </script>
</body>
</html> -->

内容在textarea中，根据实际开发环境可以选择从数据库读取

实际效果

一个页面不能同时使用在线编辑器和将markdown转HTML，此处截图

其他事项

这就是Editor的简单引入使用，其他如编辑器的配置请到官方Github地址或者官方演示以及说明地址查看文档，里面有较为详细的介绍。

标签云

ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd GC Github Hexo IDEA JavaScript jsDeliver JS樱花特效 JVM Linux Live2D markdown Maven MyBatis MyBatis-plus MySQL Navicat Oracle Pictures QQ Sakura SEO Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC Thymeleaf Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 通信原理