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

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

前言


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


完成项目一览


微信截图_20220506142906.png

微信截图_20220506142918.png


调研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-routerVuex这些插件,所以尽可能轻装。


2. 创建编辑器组件


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


3. 配置编辑器组件


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


  1. 代码没有被高亮
  2. 语言不是中文
  3. 编辑器样式有问题


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


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


  1. 访问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~



微信截图_20220506142906.png微信截图_20220506142906.png

相关文章
|
1月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
69 4
|
9天前
|
小程序
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
16 0
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
|
18天前
|
JavaScript 数据安全/隐私保护 开发者
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
推荐开源图片编辑器,基于fabric.js和Vue开发,适合海报、Logo等设计场景。拥有4.4K GitHub Stars,特性包括自定义字体、素材、模板,支持插件扩展、右键菜单及快捷键。提供图片滤镜、裁剪、拖拽、PSD导入、水印设置和分类素材管理。适用于非专业设计者,易于二次开发。
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
|
2月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
41 1
基于HTML5开发的Markdown在线编辑器
|
8天前
|
自然语言处理 Shell 开发者
|
15天前
|
Linux C++ 开发者
几款主流好用的markdown编辑器介绍
几款主流好用的markdown编辑器介绍
20 0
|
1月前
|
JSON API 开发工具
|
1月前
|
机器学习/深度学习 自然语言处理 PyTorch
|
1月前
Markdown编辑器--冷门实用知识总结
Markdown编辑器--冷门实用知识总结
|
2月前
|
Web App开发 存储 机器学习/深度学习
欢迎使用CSDN-markdown编辑器
欢迎使用CSDN-markdown编辑器
29 0