Web项目快速引入Editormd

之前写社区项目的时候用到了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地址或者官方演示以及说明地址查看文档,里面有较为详细的介绍。

Author: yremp
Link: /2019/09/13/editormd/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.