搜索

我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器(开...

前端历劫之路

共 7530字，需浏览 16分钟

 ·

2021-03-09 19:50

前言

之前，一直想开发一款属于自己的Markdown编辑器，主要是自己平常写文章可以更加灵活操作，另外扩宽自己的视野也是非常不错的选择啊！所以在周末就决定玩耍一番。首先我调研了很多线上热门的md编辑器，都很优秀。不为超过他们，主要自己用着舒服点。这篇文章主要是记录下我是如何从0到1是完成一款还算拿得出手的Markdown编辑器。

完成项目一览

df94dffd6df9bc10f111ca4813823087.webp

870b01fc534e8b4fe4dc626231102e85.webp

调研Markdown编辑器

国内、国外关于Markdown编辑器有很多。

  • editor.md

网址：https://pandao.github.io/editor.md/

是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。这个组件好像是国内开发的，个人之前用着还可以。

  • typora

网址：https://www.typora.io/

Typora是一款免费的轻量级Markdown编辑器，它没有Mou，Haroopad等Markdown编辑器那么大名鼎鼎，算是较为小众的一款产品。凭良心说话，我用过的Markdown编辑器也有好几款，其中包括：小书匠，Haroopad，Atom等，但Typora是最合我心意的一款编辑器了，其轻量、快速、易于上手，使用起来简直不要太舒服！！

  • tui-editor

网址：https://ui.toast.com/tui-editor

这是一款Markdown组件，通过调研决定用它。为什么？确认过眼神~

技术栈

  • Vue.js

  • tui-editor

实战

确定好技术栈之后，我们就得脚踏实地地干活了。

1. 搭建Vue脚手架

我们会使用VueCLI搭建一个最基础的项目，这里暂时不需要Vue-router、Vuex这些插件，所以尽可能轻装。

2. 创建编辑器组件

我们会在components文件目录下创建一个Editor.vue文件，这个文件也就是我们的主战场，大部分操作都会在这个文件。

3. 配置编辑器组件

在配置编辑器时，有以下几点使我非常困惑，以致于花费了大量时间。

  1. 代码没有被高亮

  2. 语言不是中文

  3. 编辑器样式有问题

以上这几个问题通过以下措施才得以解决：

  1. 通过阅读文档：https://nhn.github.io/tui.editor/latest/

  2. 访问Github网站：https://github.com/nhn/tui.editor

Editor.vue

<template>
<div class="main">
<div id="editor"></div>
</div>
</template>
<script>
import Editor from "@toast-ui/editor";
import hljs from "highlight.js";
import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight";
import '@toast-ui/editor/dist/i18n/zh-cn.js';

import "highlight.js/styles/github.css";
import "codemirror/lib/codemirror.css"; // Editor's Dependency Style
import "@toast-ui/editor/dist/toastui-editor.css"; // Editor's Style
import "@/styles/index.css";
export default {
components: {},
data() {
return {
editor: null
    };
  },
mounted() {
this.editor = new Editor({
el: document.getElementById("editor"),
plugins: [[codeSyntaxHighlight, {hljs}]],
previewStyle: "vertical",
height: "100vh",
initialEditType: "markdown",
minHeight: "200px",
initialValue: "",
placeholder: "你想写点什么...",
language:'zh-CN',
useCommandShortcut: true,
useDefaultHTMLSanitizer: true,
usageStatistics: false,
hideModeSwitch: false,
viewer: true,
toolbarItems: [
"heading",
"bold",
"italic",
"strike",
"divider",
"hr",
"quote",
"divider",
"ul",
"ol",
"task",
"indent",
"outdent",
"divider",
"table",
"image",
"link",
"divider",
"code",
"codeblock",
      ],
    });
this.editor.getUI().getToolbar().removeItem("21");
  },
};
</script>

看似上面几行代码，但是也是很费劲才得以完成。

增加功能

首先，我开发这个程序的初衷是更好地方便自己写文章，所以，我定下了这几个需求：

  1. 可复制HTML格式文本，方便复制到微信公众号

  2. 可复制Markdown文本，方便可以复制到稀土掘金、csdn这些博客网站上发布

  3. 可下载Markdown文件，更加方便保存和移动

因篇幅原因，先奉上主要逻辑代码。这里我使用了clipboard这个将文本复制到剪贴板的插件。网址：https://clipboardjs.com/。
另外，downloadBlobAsFile方法主要是创建Blob对象，然后通过a标签的download属性进行下载。

downloadBlobAsFile.js

export default function downloadBlobAsFile(data, filename) {
const contentType = 'application/octet-stream';
if (!data) {
console.error(' No data');
return;
    }

if (!filename) {
        filename = 'filetodonwload.txt';
    }

if (typeof data === 'object') {
        data = JSON.stringify(data, undefined, 4);
    }

let blob = new Blob([data], {type: contentType});
let e = document.createEvent('MouseEvents');
let a = document.createElement('a');

    a.download = filename;
    a.href = URL.createObjectURL(blob);
    a.dataset.downloadurl = [contentType, a.download, a.href].join(':');
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
}

Editor.vue

<template>
<div class="main">
<div class="tools">
<el-button
size="mini"
type="primary"
          @click="drawer = true"
      >工具</el-button>
<el-button
size="mini"
type="primary"
          @click="aboutView = true"
      >关于</el-button>
<el-dialog
:title="'工具'"
:visible.sync="drawer"
:append-to-body="true"
      >
<div class="tool-innter">
<el-button type="primary" @click="getHtml" class="htmlbtn"
          >复制HTML
          </el-button
          >
<el-button type="primary" @click="getMd" class="mdbtn"
          >复制MarkDown
          </el-button
          >
<el-button type="primary" @click="downloadMd" class="downloadbtn"
          >下载MarkDown
          </el-button
          >
</div>
</el-dialog>
<el-dialog
:title="'关于'"
:visible.sync="aboutView"
:append-to-body="true"
      >
<h3>Simple·MarkDown编辑器</h3>
<ul class="functionList">
<li v-for="(item,index) in functionList" :key="index">
            {{item}}
</li>
</ul>
<h3>作者</h3>
<ul class="functionList">
<li v-for="(item,index) in authorList" :key="index">{{item}}</li>
</ul>
<div class="wxcode">
<img src="../assets/wxcode.jpeg" alt="">
</div>
</el-dialog>
</div>
<div id="editor"></div>
</div>
</template>
<script>
import Editor from "@toast-ui/editor";
import Clipboard from "clipboard";
import hljs from "highlight.js";
import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight";
import '@toast-ui/editor/dist/i18n/zh-cn.js';
import downloadBlobAsFile from "../utils/download";

import "highlight.js/styles/github.css"; //https://github.com/highlightjs/highlight.js/tree/master/src/styles
import "codemirror/lib/codemirror.css"; // Editor's Dependency Style
import "@toast-ui/editor/dist/toastui-editor.css"; // Editor's Style
import "@/styles/index.css";
export default {
components: {},
data() {
return {
editor: null,
drawer: false,
aboutView: false,
functionList:['页面简约','功能实用','支持稀土掘金、CSDN、微信公众号、知乎','可复制HTML、MarkDown','可下载MarkDown文件'],
authorList:['作者：Vam的金豆之路','欢迎关注我的公众号：前端历劫之路','我创建了一个技术交流、文章分享群，群里有很多大厂的前端大佬，关注公众号后，点击下方菜单了解更多即可加我微信，期待你的加入']
    };
  },
methods: {
// 复制HTML
getHtml() {
const clipboard = new Clipboard(".htmlbtn", {
target: () => this.editor.preview.el,
      });
      clipboard.on("success", () => {
this.$message({
message: "复制成功",
type: "success",
        });
        clipboard.destroy();
      });
      clipboard.on("error", () => {
this.$message.error("复制失败");
        clipboard.destroy();
      });
    },
// 复制Markdown
getMd() {
const clipboard = new Clipboard(".mdbtn", {
text: () => this.editor.getMarkdown(),
      });
      clipboard.on("success", () => {
this.$message({
message: "复制成功",
type: "success",
        });
        clipboard.destroy();
      });
      clipboard.on("error", () => {
this.$message.error("复制失败");
        clipboard.destroy();
      });
    },
// 下载Markdown
downloadMd() {
if (this.editor.getMarkdown().trim()) {
        downloadBlobAsFile(this.editor.getMarkdown(), "unnamed.md");
      } else {
this.$message.error("下载失败");
      }
    },
  },
mounted() {
this.editor = new Editor({
el: document.getElementById("editor"),
plugins: [[codeSyntaxHighlight, {hljs}]],
previewStyle: "vertical",
height: "100vh",
initialEditType: "markdown",
minHeight: "200px",
initialValue: "",
placeholder: "你想写点什么...",
language:'zh-CN',
useCommandShortcut: true,
useDefaultHTMLSanitizer: true,
usageStatistics: false,
hideModeSwitch: false,
viewer: true,
toolbarItems: [
"heading",
"bold",
"italic",
"strike",
"divider",
"hr",
"quote",
"divider",
"ul",
"ol",
"task",
"indent",
"outdent",
"divider",
"table",
"image",
"link",
"divider",
"code",
"codeblock",
      ],
    });
this.editor.getUI().getToolbar().removeItem("21");
  },
};
</script>

针对微信公众号进行样式优化

::v-deep是深度作用选择器，主要是为了覆盖原有的样式所用。

::v-deep ul li {
  list-style-type: disc !important;
}

::v-deep ol li {
  list-style-type: decimal !important;
}

::v-deep ul li::before, ::v-deep ol li::before {
  content: none;
}
::v-deep .tui-editor-contents p>code{
  background-color: #fff5f5;
color: #ff502c;
}
::v-deep .tui-editor-contents pre {
  width: 100%;
overflow: auto;
}

线上体验

https://www.maomin.club/site/mdeditor/

结语

谢谢阅读，希望没有浪费你的时间。

源码地址：

https://github.com/maomincoding/simpleMdEditor

如果对你有帮助，欢迎Star~




33d74eae040d8562421bb8e211e0e4d1.webp

浏览 68
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器（开源）
小狮子前端
0
我用 iPad Pro 开发了一款 App
iOS开发
0
何乐简约markdown编辑器
出自何乐源码，简单的易语言写的markdown编辑器，MarkdownNOTEPADpro使用了著名的开源项目Editor.md，感谢Editor.md的作者，本程序使用了一些来自互联网的免费，开源作
何乐简约markdown编辑器
0
何乐简约markdown编辑器
出自何乐源码，简单的易语言写的markdown编辑器，Markdown NOTEPAD pro使用了
何乐简约markdown编辑器
0
StackEdit在线 MarkDown 编辑器
StackEdit中文版不仅是Markdown在线编辑工具，还是支持Gitee、GitHub、Gitea等仓库保存Markdown笔记的在线笔记工具，另外还支持了拖拽/粘贴上传图片，支持了文件搜索，支
StackEdit在线 MarkDown 编辑器
0
StackEdit在线 MarkDown 编辑器
StackEdit中文版不仅是Markdown在线编辑工具，还是支持Gitee、GitHub、Git
StackEdit在线 MarkDown 编辑器
0
useyourfeelings在线markdown编辑器
useyourfeelings是一个在线markdown编辑器，采用Python开发
useyourfeelings在线markdown编辑器
0
useyourfeelings在线markdown编辑器
useyourfeelings 是一个在线markdown编辑器，采用 Python 开发
useyourfeelings在线markdown编辑器
0
dillinger.io在线Markdown编辑器
一个在线Markdown文档编辑器，支持换肤和导出md和html文件等。
dillinger.io在线Markdown编辑器
0
看不见世界的程序员，开发了一款“吃鸡”
大数据文摘
0
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报