All Articles

Reactサイトにreact-md-editorを使ってマークダウンを編集・表示する.

react-md-editorは、React上の「マークダウンをHTMLにパース表示する機能」と「プレビューを表示しながら編集するエディター機能」があります。 react-md-editorを使い込んでいきます。

react-md-editorのDEMO

import React, { useState } from 'react';
import MDEditor from '@uiw/react-md-editor';

const ReactMdEditor = (props) => {
    const [value, setValue] = useState("**Hello world!!!**");
    return (
        <div className="container">
            <MDEditor
                value={value}
                onChange={setValue}
                // preview="preview"
                autoFocus={true}
            />
            <MDEditor.Markdown
                source={value}
                // className?: string;
                style={{
                    height: "200px",
                    maxHeight: "200px",
                    overflow:"scroll"
                }}
                onScroll={e => console.log("you MDEditor.Markdown#onScroll", e)}
                onMouseOver={e => console.log("you MDEditor.Markdown#onMouseOver", e)}
            />
        </div>
    );
}

export default ReactMdEditor;

マークダウンを表示する

マークダウンを表示する方法は簡単！ コンポーネント:MDEditor.Markdownのプロパティ:sourceにマークダウン形式のテキストを渡すだけです。 コンポーネント:MDEditor.Markdownのプロパティは下記の通りです。

  • source: 表示するマークダウンテキストを渡します。
  • className: コンポーネントにクラス名を渡します。
  • style: コンポーネントに設定するCSSを渡します。
  • onScroll: コンポーネントがスクロールした時のコールバックメソッドを設定します。
  • onMouseOver: コンポーネントにマウスオーバーした時のコールバックメソッドを設定します。

マークダウンプレビュー付きエディターを表示する

プレビューを見ながら、マークダウンを書くことができるコンポーネント:MDEditorを使います。

一般的なプロパティ

  • value: マークダウン文字列を設定します。
  • onChange: 編集テキストエリアの値が変化した時のコールバックメソッドです。
  • autoFocus: エディターの初期表示時にフォーカスを当てるかどうかを設定します。
  • height: エディターの高さを指定します。デフォルトで200が設定されています。
  • maxHeight: エディターの最大高さを指定します。デフォルトで1200が設定されています。
  • minHeights: エディターの最小高さを指定します。デフォルトで100が設定されています。
  • tabSize: タブキーを入力した時に挿入されるスペースの数を設定します。デフォルトで2が設定されています。

  • highlightEnable: エディタ領域のマークダウン記述に合致する箇所をハイライトするかどうかを設定します。

    • true: ハイライトをおこないます。
    • false: ハイライトをおこないません。ハイライトをしないことでスピードが向上します。

  • visiableDragbar: テキストエリアの高さをドラッグで変更させることができるかどうかを指定します。

    • true: テキストエリアの高さを変更可能なドラッグバーを表示します。
    • false: テキストエリアの高さを変更可能なドラッグバーを非表示します。

  • preview: コンポーネントのプレビューモードを設定します。デフォルトはliveになっています。

    • live: プレビュー領域と編集領域の両方を表示します。
    • edit: 編集領域だけを表示します。
    • preview: プレビュー領域だけを表示します。
  • fullscreen?: boolean=false: Show markdown preview.

  • hideToolbar: ツールバーを表示するかどうかを設定します。

    • true: ツールバーを非表示状態にします。
    • false: ツールバーを表示状態にします。

commands

commands?: ICommand[]: An array of ICommand, which, each one, contain a commands property. If no commands are specified, the default will be used. Commands are explained in more details below.

previewOptions

previewOptions?: ReactMarkdown.ReactMarkdownProps: This is reset @uiw/react-markdown-preview settings.

  • source (string, default: '') Markdown to parse
  • className (string?) Wrap the markdown in a div with this class name
  • allowDangerousHtml (boolean, default: false) This project is safe by default and escapes HTML. Use allowDangerousHtml: true to allow dangerous html instead. See security
  • skipHtml (boolean, default: false) Ignore HTML in Markdown
  • sourcePos (boolean, default: false) Pass a prop to all renderers with a serialized position (data-sourcepos="3:1-3:13")
  • rawSourcePos (boolean, default: false) Pass a prop to all renderers with their position (sourcePosition: {start: {line: 3, column: 1}, end:…})
  • includeNodeIndex (boolean, default: false) Pass index and parentChildCount in props to all renderers
  • allowedTypes (Array., default: list of all types) Node types to allow (can’t combine w/ disallowedTypes). All types are available at ReactMarkdown.types
  • disallowedTypes (Array., default: []) Node types to disallow (can’t combine w/ allowedTypes)
  • allowNode ((node, index, parent) => boolean?, optional) Function called to check if a node is allowed (when truthy) or not. allowedTypes / disallowedTypes is used first!
  • unwrapDisallowed (boolean, default: false) Extract (unwrap) the children of not allowed nodes. By default, when strong is not allowed, it and it’s content is dropped, but with unwrapDisallowed the node itself is dropped but the content used
  • linkTarget (string or (url, text, title) => string, optional) Target to use on links (such as blank for <a target="blank"…)
  • transformLinkUri ((uri) => string, default: [./uri-transformer.js][uri], optional) URL to use for links. The default allows only http, https, mailto, and tel, and is available at ReactMarkdown.uriTransformer. Pass null to allow all URLs. See security
  • transformImageUri ((uri) => string, default: [./uri-transformer.js][uri], optional) Same as transformLinkUri but for images
  • renderers (Object., default: {}) Object mapping node types to React components. Merged with the default renderers (available at ReactMarkdown.renderers). Which props are passed varies based on the node
  • plugins (Array., default: []) List of remark plugins to use. See the next section for examples on how to pass options

不明なプロパティ

  • textareaProps?: TextareaHTMLAttributes: Set the textarea related props.

ツールバーをカスタマイズする

Published 26 Mar 2021

Yona .Yona on Twitter