Markdown文本编辑器在信息发布及信息交互功能上的使用（一）

最新推荐文章于 2024-04-15 00:32:37 发布

肖永威

最新推荐文章于 2024-04-15 00:32:37 发布

阅读量2.6k

点赞数 2

分类专栏：软件开发技术文章标签： markdown 标记文本编辑器信息

本文链接：https://blog.csdn.net/xiaoyw71/article/details/45766701

版权

软件开发技术专栏收录该内容

62 篇文章 3 订阅

订阅专栏

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过类似HTML的标记语法，它可以使普通文本内容具有一定的格式。

MarkdownEditor 是一款基于浏览器的 Markdown 文本编辑器，功能非常简单实用。

在线地址：http://jbt.github.io/markdown-editor
这里写图片描述

资源地址：https://github.com/jbt/markdown-editor

此文本编辑器使用许可描述为“只要你喜欢，你可以随意复制、修改和使用他。（Feel free to take the code and copy it and modify it and use it however you like. ）”

这里写图片描述

这里写图片描述
其中的图标的使用是此开源产品的一项特色，如下图所示。

源代码中所引用资源如下代码块所示：

  <script src="markdown-it.js"></script>
  <script src="markdown-it-footnote.js"></script>
  <script src="highlight.pack.js"></script>
  <script src="emojify.js"></script>
  <script src="codemirror/lib/codemirror.js"></script>
  <script src="codemirror/overlay.js"></script>
  <script src="codemirror/xml/xml.js"></script>
  <script src="codemirror/markdown/markdown.js"></script>
  <script src="codemirror/gfm/gfm.js"></script>
  <script src="codemirror/javascript/javascript.js"></script>
  <script src="codemirror/css/css.js"></script>
  <script src="codemirror/htmlmixed/htmlmixed.js"></script>
  <script src="codemirror/lib/util/continuelist.js"></script>
  <script src="rawinflate.js"></script>
  <script src="rawdeflate.js"></script>
  <link rel="stylesheet" href="base16-light.css">
  <link rel="stylesheet" href="codemirror/lib/codemirror.css">
  <link rel="stylesheet" href="default.css">

注：按个人的习惯，把JavaScript代码改为JS文件夹下，样式代码改为CSS文件夹下。另有emoji目录，存储信息交互时所使用的靓丽的图标。

修改源代码目标及内容

目标

提取Markdown文本原文，用于存储后台数据库中；
提取Markdown文本编辑器所转换的HTML文档，也是用于存储到后台数据库。

修改内容

源代码中已经有类似导出/存储文档的功能代码，识别出来稍微修改即可。

    function saveAsMarkdown(){
      var code = editor.getValue();
      var blob = new Blob([code], { type: 'text/plain' });
      saveBlob(blob, "untitled.md");
    }

    function saveAsHtml() {
      var code = document.getElementById('out').innerHTML;
      var blob = new Blob([code], { type: 'text/plain' });
      saveBlob(blob, "untitled.html");
    }

新增代码

需要增加便捷上传图片功能，实现图文混排。可以借用源代码中快捷键（Ctrl/Cmd + S）方式处理，可参见源代码如下：

    function showMenu() {
      document.getElementById('menu').style.display = 'block';
    }

    document.addEventListener('keydown', function(e){
      if(e.keyCode == 83 && (e.ctrlKey || e.metaKey)){
        e.preventDefault();
        showMenu();
        return false;
      }
    });

信息发布功能设计

界面设计

这里写图片描述
信息发布界面是上下结构，上面是在线显示，下面输入框是在线编辑。如果考虑当前宽屏电脑显示器普遍，也应继续沿用左右结构。

功能设计

功能名称	功能描述	备注
信息发布	发布编辑好的信息内容	Markdown文本和HTML文本分别保存
上传图片	上传图片文件到系统	编辑器里是链接，在线显示是图片
编辑	提供编辑按钮，方便修改
退出	退出编辑状态，关闭窗口

信息存储

信息发布内容所涉及到的Markdown原文、转换后的HTML文档及图片，分别保存到文档数据库（MongoDB）中。

其他

扩展支持流程图和UML时序图

扩展支持流程图和UML时序图功能，在信息发布中不实用，仅作技术交流研究，需要额外引入插件，流程图使用flowchart，开源地址为：https://github.com/adrai/flowchart.js
这里写图片描述

风险与问题

风险是用户需要学习使用Markdown标记语言，虽然很简单，但是有些人不愿意学习；
问题之一是此开源包在显示二级标题（##）时，转译过来的HTML文档有下水平线，在使用时需要更正处理；
问题之二是不支持单行换行转换，换行需要是在编辑器里换两次行。

注：问题之一，可以调整，主页文档中的”标题h2”样式即可。

    h1{ font-size:2.5em; }
    <!-- 源h2为 -->
    h2{ font-size:2em; border-bottom:1px solid silver; padding-bottom: 5px; }
    <!-- 修改h2为 -->
    h2{ font-size:2em; }

资源

本人下载整理资源地址：http://pan.baidu.com/s/1kTHyUuN，如果失效请联系反馈。

后记

引用他人的话：Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。

如有其他易用开源资源及建议，欢迎反馈、交流。