基於Next.js腳手架實現仿掘金編輯器

luffyZhou發表於2019-03-04

前言

前面寫了一系列文章都是關於Next.js的，順便還搭建了個腳手架方便使用，反正目前來看可能用Next的人不多，也無所謂啦本來就是自己為了學習才開始寫文章的。以學代練，基礎知識已經準備的差不多了，開始應用了～我對掘金的新建文章編輯文章內容非常喜歡，正好前一段一直在弄文字編輯器相關內容，就寫一個仿掘金編輯器的Demo吧，大家感興趣的看一看，順便給個star我是非常感謝的～

專案地址：next-markdown-editor

截圖：

技術準備

關鍵技術

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
 });
複製程式碼