tui.editor

GFM MarkdownおよびWysiWygエディター - 生産的で拡張可能

目次

• パッケージ
• なぜUIエディターを乾杯するのですか？
• 特徴
• 例
• ブラウザのサポート
• リクエスト手順をプルします
• 貢献
• トーストUIファミリー
• で使用されます
• ライセンス

？パッケージ

トーストUIエディター

名前	説明
@toast-ui/editor	プレーンJavaScriptコンポーネント

トーストUIエディターのラッパー

名前	説明
@toast-ui/react-editor	ラッパーコンポーネントを反応します
@toast-ui/vue-editor	Vueラッパーコンポーネント

UIエディターのプラグインをトーストします

名前	説明
@toast-ui/editor-plugin-chart	チャートをレンダリングするプラグイン
@toast-ui/editor-plugin-code-syntax-highlight	コード構文を強調するプラグイン
@toast-ui/editor-plugin-color-syntax	編集テキストのプラグイン
@toast-ui/editor-plugin-table-merged-cell	テーブル列をマージするプラグイン
@toast-ui/editor-plugin-uml	UMLをレンダリングするプラグイン

？なぜUIエディターを乾杯するのですか？

トーストUIエディターは、マークダウンモードとwysiwygモードを提供します。マークダウンの制作のように、またはマークダウンを編集するだけかもしれない使用の種類に応じて。トーストUIエディターは、両方の使用に役立ちます。マークダウンモードとwysiwygモードを提供します。これは、任意の時点で切り替えることができます。

生産的なマークダウンモード

CommonMark + GFM仕様

今日、 Commonmarkはデファクトマークダウン標準です。 GFM（Github Flasured Markdown）は、 Githubが維持しているCommonmarkに基づいたもう1つの一般的な仕様です。これは、ほとんど使用されています。 Toast UIエディターは、 CommonMarkとGFMの両方の仕様に従います。 Toast UIエディターが提供する生産的なツールを使用して簡単にドキュメントを作成すると、仕様がサポートされている場所に作成されたドキュメントを簡単に開くことができます。

• ライブプレビュー：レンダリングされたHTMLに注目しながら、マークダウンを編集します。編集はすぐに適用されます。
• スクロール同期：マークダウンとプレビューの間の同期スクロール。それぞれを個別にスクロールする必要はありません。
• 構文のハイライト：壊れたマークダウン構文をすぐに確認できます。

簡単なwysiwygモード

• テーブル：テーブルのコンテキストメニューを介して、テーブルの列または行を追加または削除することができます。また、セルにテキストを配置することもできます。
• カスタムブロックエディター：カスタムブロック領域は、内部エディターを介して編集できます。
• コピーと貼り付け：ブラウザ、スクリーンショット、Excel、PowerPointなどの貼り付け。

ui

• ツールバー：ツールバーを介して、編集しているドキュメントに要素をスタイリングまたは追加できます。

• 暗いテーマ：暗いテーマを使用できます。

さまざまな拡張機能の使用 - プラグイン

CommonmarkとGFMは素晴らしいですが、多くの場合、より多くの抽象化が必要です。 Toast UIエディターには、Markdown構文に準拠した強力なプラグインが搭載されています。

5つの基本プラグインが次のように提供され、NPMでダウンロードして使用できます。

• chart ：「チャート」としてマークされたコードブロックは、トーストUIチャートをレンダリングします。
• code-syntax-highlight ：prism.jsが提供する言語に対応するコードブロック領域を強調表示します。
• color-syntax ：Toast UI ColorPickerを使用して、編集テキストの色をGUIで変更できます。
• table-merged-cell ：テーブルヘッダーとボディエリアの列をマージできます。
• uml ：「UML」としてマークされたコードブロックは、UML図をレンダリングします。

？特徴

• Viewer：編集領域なしでマークダウンデータのみを表示するモードをサポートします。
• 国際化（I18N）：英語、オランダ語、韓国語、日本、中国語、スペイン語、ドイツ語、ロシア語、フランス語、ウクライナ、トルコ語、フィンランド語、チェコ、アラビア語、ポーランド語、ガリシア語、スウェーデン語、イタリア語、ノルウェー語、クロアチア語 +言語をサポートします。
• ウィジェット：この機能を使用すると、特定のRegExpに一致する文字列をウィジェットノードに置き換えるルールを構成できます。
• カスタムブロック：マークダウンによってサポートされていないノードは、カスタムブロックを介して定義できます。カスタムブロックを使用して解析ロジックを書くことで、必要なノードを表示できます。

？例

• 基本
• 視聴者
• すべてのプラグインを使用します
• ユーザーのプラグインを作成します
• Toobarボタンのカスタマイズ
• 国際化（I18N）

以下に、より多くの例を紹介し、Toast UIエディターで遊んでください！

？ブラウザのサポート

クロム	インターネットエクスプローラー	角	サファリ	Firefox
はい	11+	はい	はい	はい

？リクエスト手順をプルします

トーストUI製品はオープンソースであるため、問題を修正した後、プルリクエスト（PR）を作成できます。 NPMスクリプトを実行し、次のプロセスで自分自身を開発します。

設定

mainブランチは、個人リポジトリに分岐します。それをローカルコンピューターにクローンします。ノードモジュールをインストールします。開発を開始する前に、エラーがあるかどうかを確認する必要があります。

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor

トーストUIエディターはNPMワークスペースを使用するため、NPM7に基づいて環境を設定する必要があります。 Subversionを使用する場合、パッケージごとに直接パスを移動することにより、依存関係をインストールする必要があります。

開発する

サーバーを実行してコードを保存するとすぐにコードが反映されることがわかります。テストケースを追加して、グリーンの権利を作ることをお見逃しなく。

Snowpack-dev-serverを実行します

Snowpackを使用すると、バンドルなしで開発サーバーを実行できます。

$ npm run serve editor

Webpack-dev-serverを実行します

レガシーブラウザのテストが必要な場合でも、開発サーバーはWebpackを使用して実行できます。

$ npm run serve:ie editor

テストを実行します

$ npm test editor

リクエストをプルします

PRをアップロードする前に、最後にテストを実行して、エラーがあるかどうかを確認してください。エラーがない場合は、コミットしてからプッシュしてください！

PRの手順の詳細については、貢献セクションのリンクを参照してください。

貢献

• 行動規範
• 貢献ガイドライン
• コミットメント条約
• ガイドラインを発行します

？トーストUIファミリー

• トーストUIカレンダー
• トーストUIチャート
• トーストUIグリッド
• トーストUIイメージエディター
• トーストUIコンポーネント

で使用されます

• Nhn Dooray！ - コラボレーションサービス（プロジェクト、メッセンジャー、メール、カレンダー、ドライブ、ウィキ、連絡先）
• UNOTES-ビジュアルスタジオコード拡張機能

ライセンス

このソフトウェアは、MIT©NHNクラウドの下でライセンスされています。