基于Next.js脚手架实现仿掘金编辑器

前言

前面写了一系列文章都是关于Next.js的，顺便还搭建了个脚手架方便使用，反正目前来看可能用Next的人很少，也无所谓啦原本就是本身为了学习才开始写文章的。以学代练，基础知识已经准备的差很少了，开始应用了～我对掘金的新建文章编辑文章内容很是喜欢，正好前一段一直在弄文本编辑器相关内容，就写一个仿掘金编辑器的Demo吧，你们感兴趣的看一看，顺便给个star我是很是感谢的～

项目地址：next-markdown-editor

截图：

技术准备

• Next.js
• next-antd-scaffold
• simplemde-markdown-editor
• react-markdown

关键技术

• Layout布局
• 异步引入，dynamic(import('XXX'))
• markdown转换

解决的问题

• Layout布局以及react-markdown CSS样式

// 针对布局单独写了一个editor-markdown.less,在全局引入了。
  /asserts/editor-markdown.less
复制代码

• 服务端渲染markdown编辑器 markdown编辑器若是正常倒入是能够被渲染的，可是当进行页面刷新的时候，服务端会获取不到navigator变量，因此合理的办法是异步引入markdown-editor

  // SimpleMde.js
   import { Component } from 'react';
   import SimpleMDE from 'simplemde';
   import marked from 'marked';
   import hljs from 'highlight.js';
   import 'simplemde/dist/simplemde.min.css';
   import 'highlight.js/styles/github.css';
   
   class SimpleMDEditor extends Component {
     constructor(props) {
       super(props);
       this.state = { };
       this.smde = null;
     }
   
     componentDidMount() {
       // 编辑器内容点击不弹文字
       document.getElementById('markdownEditor')
         .parentNode // 获取编辑器container
         .addEventListener('click', e => e.stopPropagation());
       this.smde = new SimpleMDE({
         element: document.getElementById('markdownEditor').childElementCount,
         autofocus: true,
         autosave: true,
         initialValue: '',
         indentWithTabs: false,
         placeholder: '## 输入试题内容...',
         renderingConfig: {
           singleLineBreaks: false,
           codeSyntaxHighlighting: true,
         },
         insertTexts: {
           horizontalRule: ["", "\n\n-----\n\n"],
           image: ["![](http://", ")"],
           link: ["[", "](http://)"],
           table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
         },
         previewRender: function(plainText) {
           return marked(plainText, {
             renderer: new marked.Renderer(),
             gfm: true,
             pedantic: false,
             sanitize: false,
             tables: true,
             breaks: true,
             smartLists: true,
             smartypants: true,
             highlight: function (code) {
               return hljs.highlightAuto(code).value;
             }
           });
         },
         spellChecker: false
       });
       SimpleMDE.toggleSideBySide(this.smde);
     }
   
     render() {
       return (
         <div id='editorContaienr'>
           <textarea id='markdownEditor'></textarea>
         </div>
       );
     }
   }
   
   export default SimpleMDEditor;
   
   // index.js
   const SimpleMDEditor = dynamic(import('./SimpleMde'), {
     ssr: false
   });
  复制代码

关于异步引入，能够详见Next.js官网异步引入组件文档，写得很详细。

项目地址

项目长这个样子：

普通的富文本编辑器

说实话，这个编辑器真心好用，你若是需求很是简单，只要一个富文本编辑器，不要任何布局之类的，直接引入就完事了，由于预览，全屏的工做编辑器已经帮咱们作了，很是好用～

编辑器内容：

预览内容：

仿掘金编辑器

这里要说的就是，其实编辑器已经帮咱们作了全部能作的事，至于仿掘金编辑器页面咱们作的就是初始化的时候将编辑器分边展现便可，而后进行一下Layout布局，作成掘金的样子，我这里就简单的写一下，至于底部的内容就不写了，你们本身发挥想象吧，还挺简单的～

页面效果：

是否是还挺有模有样的，哈哈😄，页面底部的页脚内容我没有继续写，container已经流出来了，感兴趣的小伙伴自行发挥，关于Layout布局详情在项目的CSS里，你们自行获取，我就不贴代码了～～～

预览内容

一样的，其实预览内容也彻底可使用这个富文本编辑器，只须要进行简单的预览布局就能够～可是秉着学习新东西的理念，我就用react-markdwon作预览吧。

使用react-markdown作预览还真是有不少麻烦的地方，首先存在一些不兼容的地方，其次，react-markdown没有任何的样式，你须要本身对string -> markdwon以后的各类标签添加相应的样式才能够～

实现效果：

结束语

陆续可能还会用这个脚手架搭建更多的应用Demo，目前只作前端Demo，可能后续还会有带服务端内容的，由于前一个系列文章有小伙伴说想看先后端带数据库的完整项目，正在努力写呢，不过工做之余写，时间可能不那么充足，感兴趣的能够留言交流～😁

Next-Markdown-Editor ⭐️甩过来