之前写社区项目的时候用到了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 Hexo IDEA IPA JavaScript jsDeliver JS樱花特效 JVM Linux markdown Maven MyBatis MyBatis-plus MySQL Pictures Sakura SEO shadowrocket Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC SSR Thymeleaf V2ray Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 苹果iOS国外账号 苹果IOS账号