Cherry Markdown Writer

ドキュメント

初識cherry markdown 編集器
hello world
画像&ファイルアップロードインターフェースの設定
ツールバーの調整
カスタムシンタックス
設定項目の全解
テーマの設定
コードブロックシンタックスの拡張
イベント&コールバック
API

デモ

フルモデル
ベーシック
モバイル
複数インスタンス
ツールバーなしエディタ
純プレビュー
XSS（デフォルトでは許可されていません）
画像WYSIWYG
テーブルWYSIWYG
自動番号付きヘッダー
ストリーム入力モード（AIチャートシナリオ）

紹介

Cherry Markdown Editorは、Javascriptで書かれたMarkdownエディタです。Cherry Markdown Editorは、すぐに使える、軽量でシンプル、拡張が容易などの利点があります。ブラウザやサーバー（NodeJs）で動作します。

すぐに使える

開発者は非常に簡単な方法でCherry Markdown Editorを呼び出してインスタンス化できます。インスタンス化されたエディタは、デフォルトでほとんどの一般的なMarkdownシンタックス（タイトル、目次、フローチャート、数式など）をサポートします。

拡張が容易

Cherry Markdown Editorがサポートするシンタックスが開発者のニーズを満たさない場合、迅速に二次開発や機能拡張を行うことができます。同時に、Cherry Markdown Editorは純粋なJavaScriptで実装されるべきであり、angular、vue、reactなどのフレームワーク技術に依存すべきではありません。フレームワークはコンテナ環境を提供するだけです。

特徴

シンタックスの特徴

画像のズーム、配置、引用
テーブルの内容に基づいてチャートを生成
フォントの色とサイズの調整
フォントの背景色、上付き文字、下付き文字
チェックリストの挿入
オーディオやビデオの挿入

複数のモード

スクロール同期付きのライブプレビュー
プレビューのみのモード
ツールバーなしのモード（ミニマリスト編集モード）
モバイルプレビューモード

機能の特徴

リッチテキストからコピーしてMarkdownテキストとして貼り付け
クラシック改行＆通常改行
マルチカーソル編集
画像サイズの編集
画像やPDFとしてエクスポート
新しい行の先頭に表示されるフロートツールバー
テキストを選択すると表示されるバブルツールバー

パフォーマンスの特徴

部分的なレンダリング
部分的な更新

セキュリティ

Cherry Markdownには組み込みのセキュリティフックがあり、ホワイトリストのフィルタリングとDomPurifyを使用してスキャンとフィルタリングを行います。

スタイルテーマ

Cherry Markdownにはさまざまなスタイルテーマが用意されています。

特徴の表示

詳細についてはこちらをクリックしてください。

インストール

yarnを使用

yarn add cherry-markdown

npmを使用

npm install cherry-markdown --save

mermaid描画とテーブル自動チャート機能を有効にする必要がある場合は、mermaidとechartsパッケージを同時に追加する必要があります。

現在、Cherryが推奨するプラグインバージョンはecharts@4.6.0、mermaid@9.4.3です。

# mermaid依存関係をインストールしてmermaid描画機能を有効にする
yarn add mermaid@9.4.3
# echarts依存関係をインストールしてテーブル自動チャート機能を有効にする
yarn add echarts@4.6.0

クイックスタート

ブラウザ

UMD

<link href="cherry-editor.min.css" />
<div id="markdown-container"></div>
<script src="cherry-editor.min.js"></script>
<script>
  new Cherry({
    id: 'markdown-container',
    value: '# welcome to cherry editor!',
  });
</script>

ESM

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown';
const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

Node

const { default: CherryEngine } = require('cherry-markdown/dist/cherry-markdown.engine.core.common');
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');

ライトバージョンの使用

mermaidライブラリのサイズが非常に大きいため、cherryビルド製品にはmermaidを内蔵しないコアビルドパッケージが含まれています。コアビルドは以下の方法でインポートできます。

フルモード（UIインターフェース付き）

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

エンジンモード（シンタックスコンパイルのみ）

// Cherryエンジンコアビルドをインポート
// エンジンの設定項目はCherryの設定項目と同じです。以下のドキュメント内容はCherryコアパッケージのみを紹介します。
import CherryEngine from 'cherry-markdown/dist/cherry-markdown.engine.core';
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');

// --> <h1>welcome to cherry editor!</h1>

⚠️ mermaidについて

コアビルドパッケージにはmermaid依存関係が含まれていないため、関連プラグインを手動でインポートする必要があります。

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';
import mermaid from 'mermaid';

// プラグインの登録はCherryのインスタンス化前に行う必要があります
Cherry.usePlugin(CherryMermaidPlugin, {
  mermaid, // mermaidオブジェクトを渡す
  // mermaidAPI: mermaid.mermaidAPI, // mermaid APIを渡すこともできます
  // 同時にここでmermaidの動作を設定できます。詳細はmermaid公式ドキュメントを参照してください。
  // theme: 'neutral',
  // sequence: { useMaxWidth: false, showSequenceNumbers: true }
});

const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

動的インポート

推奨動的インポートを使用します。以下はwebpackの動的インポートの例です。

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';

const registerPlugin = async () => {
  const [{ default: CherryMermaidPlugin }, mermaid] = await Promise.all([
    import('cherry-markdown/src/addons/cherry-code-block-mermaid-plugin'),
    import('mermaid'),
  ]);
  Cherry.usePlugin(CherryMermaidPlugin, {
    mermaid, // mermaidオブジェクトを渡す
  });
};

registerPlugin().then(() => {
  // プラグインの登録はCherryのインスタンス化前に行う必要があります
  const cherryInstance = new Cherry({
    id: 'markdown-container',
    value: '# welcome to cherry editor!',
  });
});

設定

/src/Cherry.config.jsを参照するか、こちらをクリックしてください。

例

詳細な例についてはこちらをクリックしてください。

クライアント

開発中です。詳細は/client/ディレクトリを参照してください。

拡張

カスタムシンタックス

こちらをクリックしてください。

カスタムツールバー

こちらをクリックしてください。

ユニットテスト

Jestはそのアサーション、非同期サポート、スナップショット機能のために選ばれました。ユニットテストにはCommonMarkテストとスナップショットテストが含まれます。

CommonMarkテスト

yarn run test:commonmarkを実行して公式のCommonMarkスイートをテストします。このコマンドは高速で実行されます。

スイートはtest/suites/commonmark.spec.jsonにあります。例えば：

{
  "markdown": " \tfoo\tbaz\t\tbim\n",
  "html": "<pre><code>foo\tbaz\t\tbim\n</code></pre>\n",
  "example": 2,
  "start_line": 363,
  "end_line": 368,
  "section": "Tabs"
},

この場合、JestはCherry.makeHtml(" \tfoo\tbaz\t\tbim\n")によって生成されたHTMLを期待される結果"<pre><code>foo\tbaz\t \tbim\n</code></pre>\n"と比較します。Cherry Markdownのマッチャーはdata-lineなどのプライベート属性を無視しています。

CommonMarkの仕様とスイートは次の場所から取得できます：https://spec.commonmark.org/ 。

スナップショットテスト

yarn run test:snapshotを実行してスナップショットテストを実行します。test/core/hooks/List.spec.tsのようにスナップショットスイートを書くことができます。最初の実行時にスナップショットが自動的に生成されます。その後、Jestはスナップショットと生成されたHTMLを比較できます。スナップショットを再生成する必要がある場合は、test/core/hooks/__snapshots__の下にある古いスナップショットを削除してこのコマンドを再度実行します。

スナップショットテストは遅く実行されます。エラーが発生しやすく、Cherry Markdownの特別なシンタックスを含むフックをテストするためにのみ使用されるべきです。

貢献

より強力なMarkdownエディタを構築するために参加してください。もちろん、機能リクエストを提出することもできます。作業を始める前にこちらを読んでください。

Stargazers over time

ライセンス

Apache-2.0

Files

README.JP.md

Latest commit

History