编辑器Markdown Editor分享

编辑器Markdown Editor整理

最近开发react项目里需要使用markdown编辑器，CodeMirror作为首先，用起来感觉不错，就是感觉太庞大，然有些报错无法处理。 后来选择了一款轻量级的React组件，效果不错并且解决了问题，所以分享给大家。

它具有预览功能的轻量级编辑器，使用React.js和TypeScript实现。 此React组件旨在提供具有语法突出显示支持的简单Markdown编辑器。 这基于textarea封装，因此它不依赖于任何现代代码编辑器，如Acs，CodeMirror，Monaco等

优势在于

• 按Tab键缩进行或选定的文本，拖拽缩放大小。
• 它基于textarea封装，不依赖于任何现代代码编辑器。
• 不依赖于作者自己封装的UIW组件库。
• 能自动生成列表

在线体验

• CodeSandbox的演示预览
• Github gh-pages的演示预览

快速使用

npm i @uiw/react-md-editor

编辑器使用

import React from "react";
import ReactDOM from "react-dom";
import MEDitor from '@uiw/react-md-editor';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      markdown: '# This is a H1  \n## This is a H2  \n###### This is a H6',
    };
    this.updateMarkdown = this.updateMarkdown.bind(this);
  }
 
  updateMarkdown(value) {
    this.setState({ markdown: value });
  }
 
  render() {
    return (
      <div>
        <MDEditor  // 编辑器
          value={this.state.markdown}
          onChange={this.updateMarkdown}
          width={1200} // 编辑器宽度
          height={480} // 编辑器高度
        />
        <MDEditor.Markdown  // 文本展示
         source={this.state.markdown}
        />  
      </div>
    );
  }
}
 
ReactDOM.render(
  <App />,
  document.getElementById('app')
);

自定义工具栏

import React from "react";
import ReactDOM from "react-dom";
import MEDitor, { commands } from '@uiw/react-md-editor';
 
const title3: commands.ICommand = {
  name: 'title3',
  keyCommand: 'title3',
  buttonProps: { 'aria-label': 'Insert title3' },
  icon: (
    <svg width="12" height="12" viewBox="0 0 520 520">
      <path fill="currentColor" d="M15.7083333,468 C7.03242448,468 0,462.030833 0,454.666667 L0,421.333333 C0,413.969167 7.03242448,408 15.7083333,408 L361.291667,408 C369.967576,408 377,413.969167 377,421.333333 L377,454.666667 C377,462.030833 369.967576,468 361.291667,468 L15.7083333,468 Z M21.6666667,366 C9.69989583,366 0,359.831861 0,352.222222 L0,317.777778 C0,310.168139 9.69989583,304 21.6666667,304 L498.333333,304 C510.300104,304 520,310.168139 520,317.777778 L520,352.222222 C520,359.831861 510.300104,366 498.333333,366 L21.6666667,366 Z M136.835938,64 L136.835937,126 L107.25,126 L107.25,251 L40.75,251 L40.75,126 L-5.68434189e-14,126 L-5.68434189e-14,64 L136.835938,64 Z M212,64 L212,251 L161.648438,251 L161.648438,64 L212,64 Z M378,64 L378,126 L343.25,126 L343.25,251 L281.75,251 L281.75,126 L238,126 L238,64 L378,64 Z M449.047619,189.550781 L520,189.550781 L520,251 L405,251 L405,64 L449.047619,64 L449.047619,189.550781 Z" />
    </svg>
  ),
  execute: (state: commands.TextState, api: commands.TextApi) => {
    let modifyText = `### ${state.selectedText}\n`;
    if (!state.selectedText) {
      modifyText = `### `;
    }
    api.replaceSelection(modifyText);
  },
};
 
export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <div className="container">
      <MDEditor
        value="Hello Markdown!"
        commands={[
          commands.bold, commands.hr, commands.italic, commands.divider, commands.codeEdit, commands.codeLive, commands.codePreview, commands.divider,
          commands.fullscreen, 
          // Custom Toolbars
          title3,
        ]}
      />
    </div>
  );
}

Props参数

开发

NPM运行手表：类型    # 听创建类型的文件。 
npm run watch：ts  # Listen编译.tsx文件。 
npm run doc：dev   # 预览代码示例。