preface

I wrote a series of articles about Next. Js, and built a scaffold for easy use. At present, there may not be many people using Next, so it doesn’t matter. Based on learning, whereas knowledge is already about the same, began to apply ~ I the content of the new editing articles for the nuggets like it very much, just before a text editor has been get the related content, just write an imitation of the Denver nuggets editor Demo, interesting to have a look, by the way, could you give a star, I am thank you very much ~

Project address: next-markdown-Editor

Screenshots:

Technical preparation

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

The key technology

  • Layout Layout
  • Dynamic (import(‘XXX’))
  • Markdown conversion

Problem solved

  • Layout and React-MarkDown CSS styles
// Write a separate editor-markdown.less for the layout, which is introduced globally. /asserts/editor-markdown.lessCopy the code
  • The Markdown editor can be rendered if properly poured, but when the page is refreshed, the server will not get the Navigator variables, so it is reasonable to introduce markdown-Editor asynchronously 
    // 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() {componentDidMount() {document.getelementById ('markdownEditor').parentNode // Get editor 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 });Copy the code

For details on asynchronous imports, see the documentation for asynchronous imports on the Next. Js website.

The project address

The project looks like this:

Plain rich text editor

To tell you the truth, this editor is really good, if you need very simple, just a rich text editor, do not have any layout and so on, directly introduced to finish, because preview, full-screen work editor has helped us do, very good ~

Editor content:Preview content:

Imitation gold digger editor

Here to say is, in fact, the editor has helped us to do all what you can do, as for the imitation of the Denver nuggets editor page when we do is to initialize the editor points and displaying, and then make a Layout Layout, shape of the Denver nuggets, I write here is simple, as for the bottom of the content is not written, you can imagine yourself, It’s pretty easy

Page effect:

😄, I did not continue to write the footer content at the bottom of the page, the container has flowed out, interested friends to play, about the Layout details in the project CSS, everyone to obtain, I will not post code ~ ~ ~

Preview the content

In the same way, it’s perfectly possible to preview content using the rich text editor. Just do a simple layout preview. But in the spirit of learning something new, I’ll use react-Markdwon.

Using react-markDown previews is a bit of a hassle. First of all, there are some incompatibables. Second, react-Markdown does not have any styles

Effect:

conclusion

May also use this scaffold in succession build more Demo application, currently only do front-end Demo, may be there will be bring the service side, because before a series of articles has a friend said that want to see before and after the end complete projects with a database, are trying to write, but write after work, time may not be so good, interested in can leave a message ~ 😁 communication

Next-markdown-editor ⭐️