Md-editor-rt is a vuE3 version editor developed when learning VUE3 some time ago. It is the same series project of MD-Editor-V3. It is the React version, because THE VUE3 version is also completed using TSX, so the code of react version is not much different.

The author’s blog front-end content was developed using NextJS, while the content management was developed using VUE, extracting the ability to edit articles and render content to form the project.

1. Preview

1.1 Function Preview

  1. Quick insert content toolbar, full-screen editor browser, full-screen inside the page, etc.
  2. Built-in white theme and dark theme, support binding toggle;
  3. Support shortcut keys to insert content;
  4. “Prettier” can be used to format content. (” CDN “is used for importing an prettier. Only MD content can be formatted and can be disabled in the code.)
  5. Support for multiple languages, support to extend the language;
  6. Support copy and paste upload picture, picture cutting upload;
  7. Render mode is supported (no editor is displayed, only md preview content is displayed, no additional listener);
  8. supportssrTo support thenextjsThe use of;

1.2 Online Preview

Documentation with online Preview: Portal

1.3 Picture Preview

The default mode

Diablo mode

2. Basic use

The REACT version does not currently export the UMD version.

2.1 General single-page applications

import React, { useState } from 'react';
import Editor from 'md-editor-rt';
import './index.less';

export default() = > {const [md, setMd] = useState(' ');
  return <Editor theme="dark" modelValue={md} onChange={(v)= > setMd(v)} />;
};
Copy the code

2.2 Server rendering

Server-side rendering is typically done by providing markdown text to render the content rather than loading the entire editor, as shown in the following example using preview-only mode.

import React, { useState } from 'react';
import Editor from 'md-editor-rt';
import './index.less';

export default() = > {const [md] = useState('# title');
  
  // Preview-only mode only provides the md text without changing the text
  return <Editor editorId="article-content" theme="dark" modelValue={md} previewOnly />;
};
Copy the code

In terms of writing, there is no difference, but it is important to note that it is best to provide the editorId property when rendering on the server, because by default the editor generates random EditorIds. As a result, the HTML content on the server is inconsistent with the HTML content rendered on the client, causing an error (a problem that can be repeated in the NextJS base environment).

2.3 Implementation of title navigation

The React version originally provided the onGetCatalog property, which is called after the editor render each time, passing back the titles in markDown content as a list with the following structure:

interface HeadList {
  text: string;
  level: 1 | 2 | 3 | 4 | 5 | 6;
}

// eg
const [heads, setHeads] = useState<HeadList>([{ text: 'preview'.level: '2' }]);
Copy the code

In the open source blog blog-Template-Nextjs, the author already encapsulates the navigation menu based on ANTD, which is quite simple to use:

import Topicfy from '@/Topicfy';

// Assign the list of titles obtained by 'onGetCatalog' directly to 'Topicfy' component
<Topicfy heads={heads} />
Copy the code

3. Function demonstration of the editor

3.1 Extension library links

Editor extension content mostly uses CDN, considering no external network, support Intranet link extension, demonstrate (assuming external libraries are in the root directory) :

import React, { useState } from 'react';
import MdEditor from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

export default() = > {const [text] = useState(' ');

  return (
    <MdEditor
      modelValue={text}
      highlightJs="/highlight.min.js"
      highlightCss="/atom-one-dark.min.css"
      prettierCDN="/standalone.js"
      prettierMDCDN="/parser-markdown.js"
      cropperJs="/cropper.min.js"
      cropperCss="/cropper.min.css"
      iconfontJs="/iconfont.js"
    />
  );
};
Copy the code

3.2 Toolbar Customization

If you want to selectively display toolbars, two apis are provided: Toolbars and toolbarsExclude. The former displays all of the array, the latter masks all of the array, and the latter has more weight. Here’s a reference:

The case does not show the Github button

import React, { useState } from 'react';
import MdEditor from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

export default() = > {const [data] = useState({
    text: ' '.toobars: [
      'bold'.'underline'.'italic'.'strikeThrough'.'sub'.'sup'.'quote'.'unorderedList'.'orderedList'.'codeRow'.'code'.'link'.'image'.'table'.'revoke'.'next'.'save'.'pageFullscreen'.'fullscreen'.'preview'.'htmlPreview'].toolbarsExclude: ['github']});return (
    <>
      <MdEditor modelValue={data.text} toolbars={data.toobars} />
      <MdEditor modelValue={data.text} toolbarsExclude={data.toolbarsExclude} />
    </>
  );
};
Copy the code

3.3 Extension Language

The editor has both Chinese and English built-in by default, and both can be overridden through the extension API, which is used to set content hints such as titles in popovers.

To extend a language, we call it zh-NB

import React, { useState } from 'react';
import MdEditor, { StaticTextDefaultValue } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

const languageUserDefined: { 'zh-NB': StaticTextDefaultValue } = {
  'zh-NB': {
    toolbarTips: {
      bold: 'bold'.underline: 'Underline'.italic: 'italics'.strikeThrough: 'Delete line'.title: 'title'.sub: 'the subscript'.sup: 'superscript'.quote: 'reference'.unorderedList: 'Unordered List'.orderedList: 'Ordered List'.codeRow: 'Line code'.code: 'Block level code'.link: 'link'.image: 'images'.table: 'form'.revoke: 'back'.next: 'forward'.save: 'save'.prettier: 'beautification'.pageFullscreen: 'Browser full screen'.fullscreen: 'Full screen'.preview: 'preview'.htmlPreview: 'HTML Code Preview'.github: 'Source address'
    },
    titleItem: {
      h1: 'Level 1 Heading'.h2: 'Secondary title'.h3: 'Level 3 Heading'.h4: 'Level 4 Title'.h5: 'Level 5 Heading'.h6: 'Level 6 Title'
    },
    linkModalTips: {
      title: 'add'.descLable: 'Link Description:'.descLablePlaceHolder: 'Please enter a description... '.urlLable: 'Link address:'.UrlLablePlaceHolder: 'Please enter a link... '.buttonOK: 'sure'.buttonUpload: 'upload'
    },
    clipModalTips: {
      title: 'Crop image upload'.buttonUpload: 'upload'
    },
    copyCode: {
      text: 'Copy code'.tips: 'Copied'}}};export default() = > {const [data] = useState({
    text: ' '.language: 'zh-NB',
    languageUserDefined
  });

  return (
    <MdEditor
      modelValue={data.text}
      language={data.language}
      languageUserDefined={data.languageUserDefined}
    />
  );
};
Copy the code

If key = ‘zh-cn’, you can override Chinese, and so on.

3.4 Topic Switching

This section is relatively simple, built-in dark theme and default theme, using the themeAPI switch, demo:

import React, { useState } from 'react';
import MdEditor from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

export default() = > {const [data] = useState({
    text: ' '.theme: 'dark'
  });
  return <MdEditor modelValue={data.text} theme={data.theme} />;
};
Copy the code

At the end

Watch out for more updates: MD-Editor-RT