編輯器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參數

參數	說明	類型	默認值
value	cell	string	-
onChange	onChange事件	funciton	-
commands	自定義工具欄, 數組ICommand每一個含一個commands屬性。	Array
autoFocus	初始化時是否聚焦	boolean	true
previewOptions	重置編輯預覽展現
visiableDragbar	顯示拖放工具，拖放編輯器大小(右下角三個點)	boolean	true
fullscreen	編輯預覽展現，僅編輯,展現編輯,僅展現	Enum{edit, live, preview}	false
maxHeight	最大拖動高度。該visiableDragbar=true值有效	number	1200
minHeights	最小拖動高度。該visiableDragbar=true值有效	number	100
tabSize	按Tab鍵時要插入的字符數。默認2空格	number	2

開發

NPM運行手錶：類型    # 聽建立類型的文件。 
npm run watch：ts  # Listen編譯.tsx文件。 
npm run doc：dev   # 預覽代碼示例。 
複製代碼