TOAST UI Editor のよくある質問と解決方法

【無料ダウンロードリンク】tui.editor リポジトリ: https://gitcode.com/gh_mirrors/tui/tui.editor

プロジェクトの基本情報

TOAST UI Editor は、オープンソースの Markdown および WYSIWYG エディタで、GitHub Flavored Markdown (GFM) 標準をサポートし、チャートや UML 拡張機能も提供します。このプロジェクトは主に JavaScript を使用しており、フロントエンド開発に適しています。

初心者向け注意点と解決策

1. インストールと初期化に関する問題

問題内容：初心者が TOAST UI Editor をインストールまたは初期化する際に、依存関係が正しくインストールされなかったり、初期化に失敗したりすることがあります。

対処手順：

1. 依存パッケージの確認：すべての依存パッケージが正常にインストールされていることを確認してください。以下のコマンドで依存をインストールできます：

npm install @toast-ui/editor

2. エディタの初期化：HTML ファイルにコンテナ要素を追加し、JavaScript でエディタを初期化します。例：

<div id="editor"></div>
<script>
  const Editor = require('@toast-ui/editor');
  const editorInstance = new Editor({
    el: document.querySelector('#editor'),
    height: '500px',
    initialEditType: 'markdown',
    previewStyle: 'vertical'
  });
</script>

2. プラグインの使用に関する問題

問題内容：プラグインを使用する際、プラグインが正しく読み込まれず機能しないことがよくあります。

対処手順：

1. プラグインのインストール：プラグインが正しくインストールされているか確認してください。たとえば、コード構文ハイライトプラグインをインストールします：

npm install @toast-ui/editor-plugin-code-syntax-highlight

2. プラグインの読み込み：エディタの初期化時にプラグインをロードします。例：

const codeHighlightPlugin = require('@toast-ui/editor-plugin-code-syntax-highlight');
const editorInstance = new Editor({
  el: document.querySelector('#editor'),
  height: '500px',
  initialEditType: 'markdown',
  previewStyle: 'vertical',
  plugins: [codeHighlightPlugin]
});

3. 国際化設定に関する問題

問題内容：言語切り替え機能を使用する際、言語パックが正しく読み込まれない、または表示言語が正しくない場合があります。

対処手順：

1. 言語パックのインストール：言語パックが適切にインストールされているか確認してください。例えば、中国語（簡体字）用の言語パックをインストールします：

npm install @toast-ui/editor-plugin-i18n

2. 言語パックの読み込み：エディタの初期化時に言語パックをロードします。例：

const i18nPlugin = require('@toast-ui/editor-plugin-i18n');
const editorInstance = new Editor({
  el: document.querySelector('#editor'),
  height: '500px',
  initialEditType: 'markdown',
  previewStyle: 'vertical',
  language: 'zh-CN',
  plugins: [i18nPlugin]
});

これらの手順により、初心者は TOAST UI Editor の使い方をより深く理解し、一般的な問題を効果的に解決できるようになります。

【無料ダウンロードリンク】tui.editor リポジトリ: https://gitcode.com/gh_mirrors/tui/tui.editor