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

前言

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

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

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

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

通过阅读文档：https://nhn.github.io/tui.editor/latest/
访问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
};

 

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118720930