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

最新推荐文章于 2024-09-10 08:44:25 发布

weixin_33709219

最新推荐文章于 2024-09-10 08:44:25 发布

阅读量667

点赞数 1

文章标签： markdown 前端 javascript ViewUI

原文链接：https://juejin.im/post/5c10d0d0e51d45449970d3cd

版权

前言

前面写了一系列文章都是关于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
 });
复制代码