devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

markdown编辑器之editormd使用_editor.md

作者：菜鸟追梦旅行 | 2024-05-07 07:59:41

赞

踩

editor.md

文章目录

不啰嗦看效果

如果觉得对你项目有用请继续深入。
在这里插入图片描述

1. editor.md简介

  • 1.1 说明

    Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。

  • 1.2 项目地址

    github地址：https://github.com/pandao/editor.md

  • 1.3 项目效果图

在这里插入图片描述

2. 项目整合

2.1 下载editormd至自己项目根目录

如下为我的项目目录：

在这里插入图片描述
2.2 项目部署

引入css样式文件和js文件

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >   
    <!-- 引入editormd样式文件 -->
    <link rel="stylesheet" href="./editormd/css/editormd.css" >
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script> 
    <script src="./editormd/editormd.js" ></script> 

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

注意：

​ 务必引入 editormd/css/editormd.css 和 editormd/editormd.js两个文件。

页面textarea结构

<div id="test-editor">
     <textarea id="inp-content" style="display:none;">这是我首次使用</textarea>
</div>

  • 1
  • 2
  • 3

JS调用代码

<script>
  $(function() {
var editor = editormd("test-editor", {
                        height:'350px',
                        syncScrolling : "single",
                        emoji:true,
                        //启动本地图片上传功能
                        imageUpload: true,
                        watch:true,
                        imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp","zip","rar"],
                        path   : "./editormd/lib/",
                        imageUploadURL : "./upload.php", //文件提交请求路径
                        saveHTMLToTextarea : true, //注意3：这个配置，方便post提交表单
                        previewTheme : "dark",//预览主题样式 黑色
                    });
})
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

配置参数

{
    mode                 : "gfm",          // gfm or markdown
    name                 : "",             // Form element name for post
    value                : "",             // value for CodeMirror, if mode not gfm/markdown
    theme                : "",             // Editor.md self themes, before v1.5.0 is CodeMirror theme, default empty
    editorTheme          : "default",      // Editor area, this is CodeMirror theme at v1.5.0
    previewTheme         : "",             // Preview area theme, default empty
    markdown             : "",             // Markdown source code
    appendMarkdown       : "",             // if in init textarea value not empty, append markdown to textarea
    width                : "100%",
    height               : "100%",
    path                 : "./lib/",       // Dependents module file directory
    pluginPath           : "",             // If this empty, default use settings.path + "../plugins/"
    delay                : 300,            // Delay parse markdown to html, Uint : ms
    autoLoadModules      : true,           // Automatic load dependent module files
    watch                : true,
    placeholder          : "Enjoy Markdown! coding now...",
    gotoLine             : true,           // Enable / disable goto a line
    codeFold             : false,
    autoHeight           : false,
    autoFocus            : true,           // Enable / disable auto focus editor left input area
    autoCloseTags        : true,
    searchReplace        : true,           // Enable / disable (CodeMirror) search and replace function
    syncScrolling        : true,           // options: true | false | "single", default true
    readOnly             : false,          // Enable / disable readonly mode
    tabSize              : 4,
    indentUnit           : 4,
    lineNumbers          : true,           // Display editor line numbers
    lineWrapping         : true,
    autoCloseBrackets    : true,
    showTrailingSpace    : true,
    matchBrackets        : true,
    indentWithTabs       : true,
    styleSelectedText    : true,
    matchWordHighlight   : true,           // options: true, false, "onselected"
    styleActiveLine      : true,           // Highlight the current line
    dialogLockScreen     : true,
    dialogShowMask       : true,
    dialogDraggable      : true,
    dialogMaskBgColor    : "#fff",
    dialogMaskOpacity    : 0.1,
    fontSize             : "13px",
    saveHTMLToTextarea   : false,          // If enable, Editor will create a <textarea name="{editor-id}-html-code"> tag save HTML code for form post to server-side.
    disabledKeyMaps      : [],
    
    onload               : function() {},
    onresize             : function() {},
    onchange             : function() {},
    onwatch              : null,
    onunwatch            : null,
    onpreviewing         : function() {},
    onpreviewed          : function() {},
    onfullscreen         : function() {},
    onfullscreenExit     : function() {},
    onscroll             : function() {},
    onpreviewscroll      : function() {},
    
    imageUpload          : false,          // Enable/disable upload
    imageFormats         : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL       : "",             // Upload url
    crossDomainUpload    : false,          // Enable/disable Cross-domain upload
    uploadCallbackURL    : "",             // Cross-domain upload callback url

    toc                  : true,           // Table of contents
    tocm                 : false,          // Using [TOCM], auto create ToC dropdown menu
    tocTitle             : "",             // for ToC dropdown menu button
    tocDropdown          : false,          // Enable/disable Table Of Contents dropdown menu
    tocContainer         : "",             // Custom Table Of Contents Container Selector
    tocStartLevel        : 1,              // Said from H1 to create ToC
    htmlDecode           : false,          // Open the HTML tag identification 
    pageBreak            : true,           // Enable parse page break [========]
    atLink               : true,           // for @link
    emailLink            : true,           // for email address auto link
    taskList             : false,          // Enable Github Flavored Markdown task lists
    emoji                : false,          // :emoji: , Support Github emoji, Twitter Emoji (Twemoji);
                                           // Support FontAwesome icon emoji :fa-xxx: > Using fontAwesome icon web fonts;
                                           // Support Editor.md logo icon emoji :editormd-logo: :editormd-logo-1x: > 1~8x;
    tex                  : false,          // TeX(LaTeX), based on KaTeX
    flowChart            : false,          // flowChart.js only support IE9+
    sequenceDiagram      : false,          // sequenceDiagram.js only support IE9+
    previewCodeHighlight : true,           // Enable / disable code highlight of editor preview area

    toolbar              : true,           // show or hide toolbar
    toolbarAutoFixed     : true,           // on window scroll auto fixed position
    toolbarIcons         : "full",         // Toolbar icons mode, options: full, simple, mini, See `editormd.toolbarModes` property.
    toolbarTitles        : {},
    toolbarHandlers      : {
        ucwords : function() {
            return editormd.toolbarHandlers.ucwords;
        },
        lowercase : function() {
            return editormd.toolbarHandlers.lowercase;
        }
    },
    toolbarCustomIcons   : {               // using html tag create toolbar icon, unused default <a> tag.
        lowercase        : "<a href=\"javascript:;\" title=\"Lowercase\" unselectable=\"on\"><i class=\"fa\" name=\"lowercase\" style=\"font-size:24px;margin-top: -10px;\">a</i></a>",
        "ucwords"        : "<a href=\"javascript:;\" title=\"ucwords\" unselectable=\"on\"><i class=\"fa\" name=\"ucwords\" style=\"font-size:20px;margin-top: -3px;\">Aa</i></a>"
    },
    toolbarIconTexts     : {},
    
    lang : {  // Language data, you can custom your language.
        name        : "zh-cn",
        description : "开源在线Markdown编辑器<br/>Open source online Markdown editor.",
        tocTitle    : "目录",
        toolbar     : {
            //...
        },
        button: {
            //...
        },
        dialog : {
            //...
        }
        //...
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116

显示效果

在这里插入图片描述

界面出来了已经完成很大一部分了。通过设置提交数据打印可以查看editormd提交数据的一个结构- 在这里插入图片描述
通过debug我们可有看到提交给后台的数据如下：
在这里插入图片描述

3. 图片上传处理

3.1 editormd的图片上传功能有很多坑，下面我们将依次填坑。

editormd图片上传功能需要设置，要在返回固定格式的json数据，即使在调试时候。扣丁曼在初次使用editormd项目时在此处浪费了很多时间。

开启图片上传参数imageUpload : true、imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],、imageUploadURL : "./upload.php",

后台返回样式如下：

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

  • 1
  • 2
  • 3
  • 4
  • 5

3.2 增加截图上传和拖拽上传图片功能

由于editormd的上传图片功能用户体验并不友好！每次上传图片很费事。

扣丁曼通过收集网上其他小伙伴提供的建议也实现了editormd的截图上传和拖拽上传功能。

  • 新增JS插件代码

    文件名editoemd-image-past.js放置于editormd/plugins文件夹下

    <script>
    console.log('代码内容较多请通过下载方式查看！')
</script>

    • 1
    • 2
    • 3

  • 页面引入

    <script src="./editormd/plugins/editormd-image-past.js"></script>

    • 1

  • 项目中配置

    path   : "__PAGE__/global/plugins/editormd/lib/",
imageUploadURL : "/uploadFile", //文件提交请求路径
onload : function() {
        initPasteDragImg(this); //配置图片粘贴上传
        },
saveHTMLToTextarea : true, //注意3：这个配置，方便post提交表单

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

4. 前台展示editormd数据

  • 在view页面引入css文件和js文件如下

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >
   
    <!-- 引入editormd样式文件 -->
    <link rel="stylesheet" href="./editormd/css/editormd.css" >

<link href="./editormd/css/sons-of-obsidian.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

  • 页面展示区

    <div id="test-editormd-view" style="width:700px;" class="blog-single-desc">
     <textarea style="display:none;" id="test-editormd-markdown-doc"><?php echo $data==''? '## 还没有数据哦！':$data;?></textarea>
</div>   


    • 1
    • 2
    • 3
    • 4

  • js处理

    <script src="./editormd/lib/marked.min.js"></script>
<!-- 第三方界面样式文件google -->
<script src="./editormd/lib/google-code-prettify/prettify.js"></script>
<script src="./editormd/lib/raphael.min.js"></script>
<script src="./editormd/lib/underscore.min.js"></script>
<script src="./editormd/lib/sequence-diagram.min.js"></script>
<script src="./editormd/lib/flowchart.min.js"></script>
<script src="./editormd/editormd.js"></script>
<script>
$(function() {
        editormd.markdownToHTML("test-editormd-view", {
            htmlDecode: "style,script,iframe", // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true, // 默认不解析
            flowChart: false, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            path: "./editormd/lib/",
            previewTheme: "dark"
        });
});
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

  • 效果图在这里插入图片描述

5. 项目源码

  • 关注公众号“扣丁曼” 回复editormd获取项目源码。

  • 在这里插入图片描述

  • 本项目采用php作为处理语言，其他语种小伙伴请各显神通。

6.联系我

  • CSDN与我联系

  • 通过公众号“扣丁曼”(号码:qcgcoder)直接与我联系。

  • 通过我的博客获取最新资讯

    博客网址：https://52qcg.cn

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/548133
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号