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

時間 2019-11-17

原文原文鏈接

前言

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

項目地址：next-markdown-editor前端

截圖：react

技術準備

關鍵技術

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