制作一款与CSDN的markdown相似的离线编辑器

CSDN的markdown编辑器, 是我目前所接触过的最好的, 功能最全的编辑器, 支持mermaid图表, LaTeX 数学公式.
那么, 有没有离线的, 免费的, 而且功能也很全的markdown工具呢?
答案是:
有, 但是只有程序员才会用

以下教你如何使用开源js制作一个离线编辑器.

思路

1. 生成一个html格式的markdown编辑器 (js + index.html)
2. 将其中的js放在CDN上, 或github上
3. 将markdown的编辑内容嵌在在index.html中

每次打开html时, 加载其中的markdown内容.

https://github.com/wzjwhut/markdown-editor
demo https://wzjwhut.github.io/markdown-editor/

下载开源markdown-plus

这公司开源markdown-plus, 是为了让更多的人购买他的APP.
https://github.com/tylingsoft/markdown-plus
按照文档编译运行

https://wzjwhut.github.io/markdown-editor/

定制

这开源的很多配置都是写死的, 没有提供配置接口.有些不友好的地方

1. 两个空格+换行, 才能换行.
2. [TOC]是从2级标题开始生成.
3. 没有文件保存的功能
4. js文件没有压缩, 太大了
5. 使用webpack2, 现在都webpack4了, 资料都不好找了.

6. 默认是两端对齐, 需要改成左端对齐

TOC从1级标题开始生成

toc参数说明
https://github.com/tylingsoft/markdown-it-github-toc

修改TOC参数
node_modules\markdown-core\src\engine.js
修改tocFirstLevel, tocLastLevel

case 'github-toc':
          this.mdc.use(markdownItGithubToc, {
            tocFirstLevel: 1,
            tocLastLevel: 3,
            tocClassName: 'toc',
            anchorLinkSymbol: '',
            anchorLinkSpace: false,
            anchorClassName: 'anchor',
            anchorLinkSymbolClassName: 'octicon octicon-link'
          })
          break

允许\n换行

参数说明
https://github.com/markdown-it/markdown-it#api

修改node_modules\markdown-core\src\index-node.js, 加上breaks参数

const options = { html: true, linkify: true, breaks:true }

默认为预览状态

文档最终是发给别人看的, 希望默认状态下开闭编辑状态, 只预览

const getPreviewWidth = () => {
  let previewWidth = Cookies.get('editor-versus-preview')
  if (previewWidth === undefined) {
    previewWidth = '100%'
  }
  return previewWidth
}

文本改成左端对齐

修改dist\index.html

    <style>
      .markdown-body p {
        text-align: left !important;
      }
    style>

TOC放在侧边上

修改dist\index.html. 本例放在了右边 (如果放在左边, 不太好处理整体的布局)

    <style>
      .toc {
        position: fixed !important;
        right: 20px !important;
        top: 5% !important;
        width: 250px !important;
        overflow: auto !important;
        height: 90% !important;
      }
      .markdown-body{
        padding-right: 250px !important;
      }
    style>

监听ctrl+s

 $(document).keydown(function(e){
    // ctrl + s
    if( e.ctrlKey  == true && e.keyCode == 83 ){
		//你自己的保存操作
		return false;
    }
  });	

升级Latex

此开源使用的katex库太旧，不支持新的语法， 需要升级. 方法如下

1. 在index.html中加上

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css" integrity="sha384-xNwWFq3SIvM4dq/1RUyWumk8nj/0KFg4TOnNcfzUU4X2gNn3WoRML69gO7waf3xh" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.js" integrity="sha384-UP7zD+aGyuDvxWQEDSRYcvoTxJSD82C6VvuEBktJZGo25CVhDstY9sCDHvyceo9L" crossorigin="anonymous">script>

2. 修改node_modules\markdown-it-latex\src\index.js
   注释掉katex, 不使用webpack管理

//import './katex.css'
import asciimath2latex from 'asciimath-to-latex'
//import katex from 'katex'

3.修改node_modules\markdown-core\src\index-browser.js
注释掉这一行

//import 'markdown-it-latex/dist/index.css'

临时保存

编辑一段文档之后, 希望能够暂存, 避免意外, 可以使用localStorage

		let md = editor.getValue();
 		localStorage.setItem(location.pathname, md);

保存为文件

在index.html的菜单栏上加上新菜单

    <span id="save_file" style="cursor: pointer">保存文件span>

本人将md数据和html代码合并在一个文件中了. md数据放在

标签下.

1. 当html的所有文档加载完成之后, js会修改dom, 因此在修改之前, 需要先读取html源码,
2. 使用上一步中的html, 再追加上md数据, 生成一个新的html,
3. 利用blob将包含md的html保存为文件

  $('#save_file').click(() => {
    let md = editor.getValue();
    let html = '\ufeff' + htmlHead + '' +
      ''</span> <span class="token operator">+</span> md <span class="token operator">+</span> <span class="token string">'' +
      htmlBody + includeJS + ''
    let blob = new Blob([html], {type: 'text/plain;charset=UTF-8'});
    saveAs(blob, fileName);
    localStorage.removeItem(location.pathname);
  });

JS CDN

将index.html中的index.bundle.js改成github上的路径, 需要利用jsdelivr的CDN服务.
例如
https://cdn.jsdelivr.net/gh/wzjwhut/markdown-editor@05ce3fe85e2fe3dbfcb73b6febba4d9134a2a7db/dist/index.bundle.js