marktion
1.0.0
中文/英語
Marktionは、Prosemirrorに基づいたWysiWyg Markdownエディターであり、Markdownの編集体験の強化に専念しています。
私たちのウェブサイトMarktion.ioが動作しているのを参照してください。
[新規] AI統合：組み込みのAI会話インターフェイス、AIプラグイン拡張機能をサポートし、スペースを押すことで行の先頭に呼び出されました。
wysiwyg編集：マークダウンレンダリング結果のリアルタイムプレビューは、直感的な編集エクスペリエンスを提供し、ソースコードモードとwysiwyg編集モードをCtrl + /で切り替えることができます。
スラッシュメニューとバブルメニュー：概念を使用した概念の編集者にすばやくインスピレーションを受けました。ダークモードのサポート：ダークモードをオンまたはオフにするためのサポート。
ダークモードのサポート：暗いモードを有効にして、低光環境で視覚的に快適な編集体験を提供します。
npm intall marktion import { ReactEditor } from 'marktion' ;
import 'marktion/dist/style.css' ;
function Editor ( ) {
return < ReactEditor content = { `# Hello World` } /> ;
}Marktion.ioが動作しているのを見るための例をご覧ください。
| 財産 | 説明 | タイプ | デフォルト |
|---|---|---|---|
| コンテンツ | エディターの最初のマークダウンコンテンツ。 | 弦 | - |
| 暗い | エディターでダークモードを有効または無効にします。 | ブール | 間違い |
| uploadoptions.uploader | 画像をアップロードするためのコールバック関数。 | (file: File, event: ClipboardEvent | InputEvent, view: ProsemirrorView) => Promise<url> | - |
| 与える | レンダラーモード | WYSIWYG | SOURCE | |
| onchange | エディターコンテンツの変更コールバック | (editor: Marktion) => void |
Tiptapのドキュメントを参照して、より多くのAPIを見つけてください。
| 財産 | 説明 | タイプ | デフォルト |
|---|---|---|---|
| エディタ | マークインスタンス | マーク | - |
使用例：
import { ReactEditor , ReactEditorRef } from 'marktion' ;
function App ( ) {
const editorRef = useRef < ReactEditorRef > ( null ) ;
const onExport = ( ) => {
const content = editorRef . current ?. editor . getContent ( ) ;
console . log ( content ) ;
} ;
return (
< >
< button onClick = { onExport } > export </ button >
< ReactEditor ref = { editorRef } />
</ >
) ;
} AIプラグインはVercel AIに基づいています。開始する前に、AIルーターを作成する必要があります。詳細については、ドキュメントを参照してください：開始。
使用例：
function Editor ( ) {
const ai = useAI ( {
basePath : import . meta . env . VITE_OPENAI_BASE_URL
} ) ;
return (
< ReactEditor ref = { editorRef } plugins = { [ ai . plugin ] } >
{ ai . element }
</ ReactEditor / >
)
} Marktionに貢献することを検討していただきありがとうございます！貢献したい場合は、次の手順に従ってください。
githubアカウントにリポジトリをフォークします。
フォークリポジトリをローカルマシンにクローンします。
git clone https://github.com/yourusername/marktion.git
cd marktionpnpm i変更を加えて、変更をテストします。
あなたの変更をコミットします。
プルリクエストを作成します。
元のリポジトリに移動し、「新しいプルリクエスト」をクリックします。必要な詳細を記入し、行った変更を説明してください。
プルリクエストをできるだけ早く確認します。貢献していただきありがとうございます！
このプロジェクトは、MITライセンスの下でライセンスされています。詳細については、ライセンスファイルを参照してください。
質問、提案、または問題がある場合は、次のチャネルを通じてお気軽にご連絡ください。
電子メール：[email protected]
問題トラッカー：プロジェクトの問題（問題タイトルの問題タイプを指定してください）
