ホーム>Web サイト構築リソース>その他のリソース
ダウンロード


さまざまなアプリケーションシナリオに適応するために構築された使いやすいマークダウンエディター




英語|デモ

導入

VDitorは、WysiWyg、インスタントレンダリング（Typoraと同様）、スプリットスクリーンプレビューモードをサポートするブラウザ側のマークダウンエディターです。 TypeScriptを使用して実装され、ネイティブJavaScriptとVue、React、Angular、Svelteなどのフレームワークをサポートします。

詳細については、VDitorの公式ディスカッションエリアへようこそ。同時に、B3LOGオープンソースコミュニティWECHAT公式アカウントB3log开源をフォローすることも歓迎します。

？§背景

Markdown Taptingメソッドの人気により、ますます多くのアプリケーションがMarkdownエディターを統合し始めています。主流の統合されたマークダウンエディターの現在のステータスは次のとおりです。

  • 一部のサポートスプリットスクリーンプレビュー、つまり編集領域とプレビュー領域が分離されています。
  • WysiWygとSplitスクリーンの両方のプレビューの両方をサポートするものもありますが、Markdown構文レイアウトはWYGモードでは完全にサポートできません。
  • Typoraのような瞬時のレンダリングはほとんどありません

これらの3つのポイントは、3つのアプリケーションシナリオに正確に対応しています。

  • 画面の分割プレビュー：大規模な画面の下での編集とタイポグラフィに適した従来のマークダウンの使用シナリオに適応
  • あなたが見るものはあなたが得るものです：それはMarkdownに精通していないユーザーに友好的であり、Markdownに精通しているユーザーもシームレスに使用することができます。
  • インスタントレンダリング：理論的には、これは最もエレガントなマークダウン編集方法であり、Markdownに精通しているユーザーがコンテンツの作成にもっと集中できるようにします

したがって、アプリケーションシナリオに適応できるマークダウンエディターは重要であり、考慮する必要があります。

  • 従来のマークダウンユーザーはシナリオを使用して、スプリットスクリーンプレビューを提供します
  • リッチなテキスト編集ユーザーの使用シナリオ、あなたが見るものを提供することがあなたが得るものです
  • 高度なマークダウンユーザーにシナリオを使用して、インスタントレンダリングを提供します

VDitorは、現代のユニバーサルマークダウン編集フィールドにある程度貢献することを望んで、これらの分野で努力してきました。

特性

  • 3つの編集モードをサポートしています：wysiwyg、インスタントレンダリング（IR）、スプリット画面プレビュー（SV）
  • サポートの概要、数学の式、脳図、チャート、フローチャート、ガントチャート、タイミングチャート、五分位数、マルチメディア、音声読書、タイトルアンカー、ハイライトとコピー、グラフヴィズレンダリング、Plantumluml Diagrams
  • エクスポート、レイジー画像の読み込み、タスクリスト、マルチプラットフォームプレビュー、マルチテーマスイッチング、WeChat To Wechat公式アカウント/Zhihu機能へのコピー
  • MarkdownのCommonmarkおよびGFMの仕様、形式および構文ツリー表示を実装し、10以上の構成をサポートします
  • ツールバーには36+操作が含まれています。拡張機能のサポートに加えて、各アイテムのショートカットキー、プロンプト、プロンプトの位置、アイコン、クリックイベント、クラス名、およびサブツールバーをカスタマイズすることもできます。
  • 式/at/トピックなどの自動完成拡張。
  • ドラッグアンドドロップとクリップボードを使用して貼り付けてアップロードして、リアルタイムのアップロード進行状況を表示し、CORSクロスドメインのアップロードをサポートできます。
  • 偶発的な損失を防ぐために、コンテンツをリアルタイムで保存します
  • サポートを記録すると、ユーザーは音声を直接公開できます
  • Paste HTMLは自動的にマークダウンに変換します。ペーストに外部リンク画像が含まれている場合、指定されたインターフェイスを介してサーバーにアップロードできます。
  • メインウィンドウサイズのドラッグアンドドロップ、文字カウントをサポートします
  • マルチテムサポート、3つの黒、白、緑のテーマの組み込み
  • 多言語のサポート、中国語、英語、韓国の内蔵のローカリゼーション
  • 主流のブラウザをサポートし、モバイルフレンドリーです

？編集モード

あなたが見るのはあなたが得るものです（wysiwyg）

WysiWygモードは、Markdownに精通していないユーザーにより親しみやすく、Markdownに精通している場合はシームレスに使用できます。

インスタントレンダリング（IR）

インスタントレンダリングモードは、Typoraに精通しているユーザーにはなじみのないものではありません。理論的には、これはマークダウンを編集する最もエレガントな方法です。

スクリーンプレビューの分割（SV）

従来のスプリットスクリーンプレビューモードは、大画面の下でのマークダウン編集に適しています。

？構文サポート

  • すべてのCommonmark構文：仕切り、ATXタイトル、Setext Title、Indent Code Block、Fence Code Block、HTMLブロック、リンク参照定義、段落、ブロックリファレンス、リスト、バックスラッシュエスケープ、HTMLエンティティ、ラインレベルコード、強調、太字、リンク、写真、ラインレベルのHTML、ハードラインブレイク、ソフトラインブレイク、プレーンテキスト。
  • すべてのGFM構文：テーブル、タスクリスト項目、ストリケスルー、自動リンク、XSSフィルタリング
  • 一般的に使用されるマークダウン拡張構文：脚注、TOC、カスタムタイトルID
  • チャート構文
    • フローチャート、タイミングチャート、ガントチャート、人魚がサポート
    • Graphviz
    • Echartsがサポートするラインチャート、パイチャート、脳チャートなど
  • 5ライン：abc.jsによってサポートされています
  • 数学式：数学的式ブロック、行レベルの数学的式、MathjaxとKatexによってサポートされる
  • YAMLフロントマター
  • 中国のコンテキストの最適化
    • 中国語と西部の言語の間にスペースを挿入します
    • 用語の綴り補正
    • 中国語などの句読点を、それに続いて英語のコンマ期間やその他の句読点を中国語に対応する句読点に置き換えます

上記の機能のほとんどは、構成を切り替えることで有効にできます。開発者は、アプリケーションシナリオに基づいてマッチングを選択できます。

？場合

  • Symは、Javaに実装された現代コミュニティ（フォーラム/BBS/ソーシャルネットワーク/ブログ）プラットフォームです
  • Solo＆Pipe B3Logブログノード分散コミュニティのためのブログノード、次世代のコミュニティネットワークへの参加を歓迎します
  • Tditorは、究極のテキスト作成体験を作成するオンラインマークダウン編集プラットフォームであるReact、VDitor、Springbootに基づいています
  • Aryaは、VueとVditorに基づいて構築されたオンラインMarkdownエディターです
  • その他のケース

使用文書

commonjs

  • インストール依存関係
npm install vditor --save
  • コード内のオブジェクトを紹介して初期化すると、index.jsを参照できます
 import Vditor from 'vditor'
import "~vditor/src/assets/less/index"

const vditor = new Vditor ( id , { options... } )

HTMLスクリプト

  • HTMLにCSSとJavaScriptを挿入してください。デモを参照してください
 <!-- ️生产环境请指定版本号，如 https://unpkg.com/[email protected]/dist... -->
< link rel =" stylesheet " href =" https://unpkg.com/vditor/dist/index.css " />
< script src =" https://unpkg.com/vditor/dist/index.min.js " > </ script >

サンプルコード

  • 公式の例/サンプルソースコード
  • CommonJSエディター
  • CommonJSレンダリング
  • Svelteで使用します

テーマ

編集者のテーマ

編集者の外観。組み込みのクラシック、ダーク2セットのテーマ。

  • エディターが初期化されたら、 options.themeを使用して内蔵テーマを設定できます。
  • 初期化が完了したら、 setThemeを介してエディターのテーマを更新できます
  • テーマの色は、index.lessの変数を変更することでカスタマイズできます
  • 既存の構造とクラス名を参照して、元のベースで変更できます

コンテンツトピック

MarkdownからのHTML出力の外観。組み込みアリデザイン、明るい、暗い、WeChat 4セットのテーマ。コンテンツテーマ拡張インターフェイスをサポートします。

  • class="vditor-reset"を表示要素に追加する必要があります
  • エディターが初期化されたら、 options.preview.theme
  • コンテンツレンダリングを初期化するときは、 IPreviewOptions.theme
  • 初期化が完了したら、 setThemeまたはsetContentThemeを介してコンテンツテーマを更新できます

コードテーマ

コードブロックの外観。組み込みのGithubおよびその他の36セットのテーマ。

  • エディターが初期化されたら、 options.preview.hljs
  • コンテンツレンダリングを初期化するときは、コードブロックスタイル、行番号、およびIPreviewOptions.hljs
  • 初期化が完了したら、 setThemeまたはsetCodeThemeを介してコードテーマを更新できます

API

id

要素idまたは要素自身のHTMLElementに入力できます

ショ和：要素自体のHTMLElementに記入するときは、 options.cache.idまたはoptions.cache.enableをfalseに設定する必要があります。

オプション

説明しますデフォルト値
i18n多言語、itipsを参照してください -
アンコードレイ履歴間隔 -
後編集者が非同期にレンダリングされた後のコールバック方法 -
身長総エディターの高さ「自動」
ミニハイト編集領域の最小高さ -
幅総エディター幅、サポート％ 「自動」
プレースホルダー入力領域が空のときのプロンプト''
ラング言語タイプ：EN_US、FR_FR、PT_BR、JA_JP、KO_KR、RU_RU、SV_SE、ZH_CN、ZH_TW 「Zh_cn」
入力（値：文字列）入力後にトリガーされます -
フォーカス（値：文字列）フォーカス後のトリガー -
ぼやけ（値：文字列）焦点を合わせた後にトリガーされます -
キーダウン（イベント：keyboardevent）押した後にトリガーされます -
ESC（値：文字列） ESCプレスの後にトリガーされました -
ctrlenter（値：文字列） ⌘/ctrl+Enterは、押した後にトリガーされます -
select（value：string）エディターでテキストを選択した後にトリガーされます -
タブTABキーは、文字列を操作し、 tおよび任意の文字列をサポートします -
TypewRitermodeタイプライターモードを有効にするかどうか間違い
CDN自己構築されたCDNアドレスを構成しますhttps://unpkg.com/vditor@${VDITOR_VERSION}
モードオプションモード：SV、IR、wysiwyg 「IR」
デバッガログを表示するかどうか間違い
価値エディターの初期化値''
テーマトピック：クラシック、ダーク'クラシック'
アイコンアイコンスタイル：アリ、素材「アリ」
CustomRenders：{Language：String、render ：（要素：htmlelement、vditor：ivditor）=> void} []カスタムレンダラー[]

options.toolbar

  • ツールバー、略語に名前を使用できます： toolbar: ['emoji', 'br', 'bold', '|', 'line'] 。デフォルト値については、SRC/TS/UTIL/OPTIONS.TSを参照してください
  • 名前を列挙することができます： emoji 、 headings 、 bold 、 italic 、 strike 、 | 、、 line 、 quote 、 list 、 ordered-list 、 check 、 outdent 、outdent、 indent 、 code 、 inline-code help insert-after insert-before br undo 、 redo 、 upload 、 link 、 table 、 record 、 edit-mode 、 both 、 preview 、 fullscreen 、 outline 、 code-theme 、 content-theme 、 export 、 devtools 、 info
  • nameが列挙にない場合、次のように形式でカスタムボタンを追加できます。 
 new Vditor ( 'vditor' , {
  toolbar : [
    {
      hotkey : '⇧⌘S' ,
      name : 'sponsor' ,
      tipPosition : 's' ,
      tip : '成为赞助者' ,
      className : 'right' ,
      icon : '<svg t="1589994565028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2808" width="32" height="32"><path d="M506.6 423.6m-29.8 0a29.8 29.8 0 1 0 59.6 0 29.8 29.8 0 1 0-59.6 0Z" fill="#0F0F0F" p-id="2809"></path><path d="M717.8 114.5c-83.5 0-158.4 65.4-211.2 122-52.7-56.6-127.7-122-211.2-122-159.5 0-273.9 129.3-273.9 288.9C21.5 562.9 429.3 913 506.6 913s485.1-350.1 485.1-509.7c0.1-159.5-114.4-288.8-273.9-288.8z" fill="#FAFCFB" p-id="2810"></path><path d="M506.6 926c-22 0-61-20.1-116-59.6-51.5-37-109.9-86.4-164.6-139-65.4-63-217.5-220.6-217.5-324 0-81.4 28.6-157.1 80.6-213.1 53.2-57.2 126.4-88.8 206.3-88.8 40 0 81.8 14.1 124.2 41.9 28.1 18.4 56.6 42.8 86.9 74.2 30.3-31.5 58.9-55.8 86.9-74.2 42.5-27.8 84.3-41.9 124.2-41.9 79.9 0 153.2 31.5 206.3 88.8 52 56 80.6 131.7 80.6 213.1 0 103.4-152.1 261-217.5 324-54.6 52.6-113.1 102-164.6 139-54.8 39.5-93.8 59.6-115.8 59.6zM295.4 127.5c-72.6 0-139.1 28.6-187.3 80.4-47.5 51.2-73.7 120.6-73.7 195.4 0 64.8 78.3 178.9 209.6 305.3 53.8 51.8 111.2 100.3 161.7 136.6 56.1 40.4 88.9 54.8 100.9 54.8s44.7-14.4 100.9-54.8c50.5-36.3 108-84.9 161.7-136.6 131.2-126.4 209.6-240.5 209.6-305.3 0-74.9-26.2-144.2-73.7-195.4-48.2-51.9-114.7-80.4-187.3-80.4-61.8 0-127.8 38.5-201.7 117.9-2.5 2.6-5.9 4.1-9.5 4.1s-7.1-1.5-9.5-4.1C423.2 166 357.2 127.5 295.4 127.5z" fill="#141414" p-id="2811"></path><path d="M353.9 415.6m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#0F0F0F" p-id="2812"></path><path d="M659.3 415.6m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#0F0F0F" p-id="2813"></path><path d="M411.6 538.5c0 52.3 42.8 95 95 95 52.3 0 95-42.8 95-95v-31.7h-190v31.7z" fill="#5B5143" p-id="2814"></path><path d="M506.6 646.5c-59.6 0-108-48.5-108-108v-31.7c0-7.2 5.8-13 13-13h190.1c7.2 0 13 5.8 13 13v31.7c0 59.5-48.5 108-108.1 108z m-82-126.7v18.7c0 45.2 36.8 82 82 82s82-36.8 82-82v-18.7h-164z" fill="#141414" p-id="2815"></path><path d="M450.4 578.9a54.7 27.5 0 1 0 109.4 0 54.7 27.5 0 1 0-109.4 0Z" fill="#EA64F9" p-id="2816"></path><path d="M256 502.7a32.1 27.5 0 1 0 64.2 0 32.1 27.5 0 1 0-64.2 0Z" fill="#EFAFF9" p-id="2817"></path><path d="M703.3 502.7a32.1 27.5 0 1 0 64.2 0 32.1 27.5 0 1 0-64.2 0Z" fill="#EFAFF9" p-id="2818"></path></svg>' ,
      click ( ) { alert ( '捐赠地址：https://ld246.com/sponsor' ) } ,
    } ] ,
} )
説明しますデフォルト値
名前ユニークなマーク -
アイコンSVGアイコン -
ヒントヒント -
ティップ姿勢ヒント： 'n'、 'ne'、 'nw'、 's'、 'se'、 'sw'、 'w'、 'e' -
ホットキー形式のショートカットキー⇧⌘ / ⌘ / ⌥⌘ -
サフィックスエディターに接尾辞を挿入します -
プレフィックスエディターにプレフィックスを挿入します -
クリック（イベント：イベント、vditor：ivditor）カスタムボタンがクリックされたときにトリガーされるイベント -
classNameスタイル名''
Toolbar？：配列<Options.Toolbar> submenu -

options.toolbarconfig

説明しますデフォルト値
隠れるツールバーを隠すかどうか間違い
ピンツールバーを修正するかどうか間違い

options.counter

説明しますデフォルト値
有効にするカウンターを有効にするかどうか間違い
after（length：number、counter：options.counter）：voidワードカウントコールバック -
マックス入力が許可されている最大値 -
タイプ統計タイプ：「マークダウン」、「テキスト」 「マークダウン」

options.cache

説明しますデフォルト値
有効にするキャッシュにLocalStorageを使用するかどうか真実
idキャッシュキー、最初のパラメーターは要素であり、キャッシュのアクティブ化が必要です -
after（html：string）：stringキャッシュコールバック -

options.comment

ショ和：WysiWygモードのみをサポートします

説明しますデフォルト値
有効にするコメントモードを有効にするかどうか間違い
add（id：string、text：string、commentsdata：icommentsdata []）コメントコールバックを追加します -
削除（ids：string []）コメントコールバックを削除します -
スクロール（上：番号）コールバックをスクロールします -
adjusttop（commentsdata：icommentsdata []）ドキュメントを変更すると、コメントの高さが適応されます -

options.preview

説明しますデフォルト値
遅れプレビューはミリ秒間隔をデバウンスします1000
最大幅プレビュー領域の最大幅800
モードディスプレイモード：両方、エディター'両方'
URL MD解析リクエスト -
解析（要素：htmlelement）プレビューコールバック -
変換（HTML：文字列）：文字列レンダリング前のコールバック -

options.preview.hljs

説明しますデフォルト値
defaultlang言語が指定されていない場合はデフォルトで言語を使用します''
有効にするコードの強調表示を有効にするかどうか真実
スタイルオプションの値については、Chromaを参照してくださいgithub
linenumber行番号を有効にするかどうか間違い
ラングス指定された言語をカスタマイズしますcode_languages
rendermenu（code：htmlelement、copy：htmlelement）メニューボタンをレンダリングします -

options.preview.markdown

説明しますデフォルト値
自己宇宙自動スペース間違い
gfmautolink自動リンク真実
fixtermtypo自動補正項間違い
TOCディレクトリを挿入します間違い
脚注脚注真実
codeblockpreview WysiWygおよびIRモードでコードブロックをレンダリングするかどうか真実
MathBlockPreview wysiwygおよびIRモードで数式をレンダリングするかどうか真実
段落2つの空の始まり間違い
消毒しますXSSフィルタリングを有効にするかどうか真実
ListStyleリストにデータスタイルの属性を追加します間違い
linkbase相対パスプレフィックスをリンクします''
linkprefix必須のプレフィックスをリンクします''
マークマークマークを有効にします間違い

options.preview.theme

説明しますデフォルト値
現在現在のトピック"ライト"
リストオプションのトピックのリスト{"Ant-design"： "ant design"、dark： "dark"、light： "light"、wechat： "wechat"}
パステーマスタイルのアドレスhttps://unpkg.com/vditor@${VDITOR_VERSION}/dist/css/content-theme

options.preview.math

説明しますデフォルト値
inlinedigitインライン数学式が$を開始した後にカウントすることは許可されていますか？間違い
マクロMathjaxでレンダリングするときにマクロ定義が渡されました{}
エンジン数学式レンダリングエンジン：Katex、Mathjax 「ケイトックス」
Mathjaxoptionsパラメータ数学的式レンダリングエンジンがMathJaxである場合 -

options.preview.actions？：array <ipreviewaction | ipreviewactioncustom>

デフォルト値は[「デスクトップ」、「タブレット」、「モバイル」、「MP-Wechat」、「Zhihu」です。構成のデフォルト値から選択するか、カスタム開発に次のフィールドを使用できます。

説明しますデフォルト値
鍵ボタンは一意に識別され、空にすることはできません -
文章ボタンテキスト -
ツールチップヒント -
classNameボタンクラス名 -
クリック（キー：文字列） [コールバックイベント]をクリックします -

options.preview.render.media

説明しますデフォルト値
有効にするマルチメディアレンダリングを有効にするかどうか真実

options.image

説明しますデフォルト値
ispreview写真をプレビューするかどうか真実
プレビュー（bom：element）=> void画像プレビュー処理 -

options.link

説明しますデフォルト値
Isopenリンクアドレスを開くかどうか真実
[bom：element）=> voidをクリックしますリンクイベントをクリックします -

options.hint

説明しますデフォルト値
解析MD分析を実行するかどうか真実
遅れプロンプトデバウンスミリ秒間隔200
絵文字デフォルトの絵文字は、lute/emoji_mapから選択するか、カスタマイズできます{'+1'： '？'、 '-1'： '？'、 'heart'： '❤️'、 'cold_sweat'： '？' }
絵文字一般的な表現のヒント -
絵文字式画像アドレスhttps://unpkg.com/vditor@${VDITOR_VERSION}/dist/images/emoji
拡張：ihintextend [] @/ツアーなどのキーワードの自動完了の拡張[] 
 interface IHintData {
  html : string ;
  value : string ;
}

interface IHintExtend {
    key : string ;

    hint ? ( value : string ) : IHintData [ ] | Promise < IHintData [ ] > ;
}

options.upload

  • ファイルアップロードのデータ構造は次のとおりです。バックエンドによって返されるデータ構造が一貫していない場合、変換にformatを使用できます。 
 // POST data
xhr . send ( formData ) ;  // formData = FormData.append("file[]", File)
// return data
{
 "msg" : "" ,
 "code" : 0 ,
 "data" : {
 "errFiles" : [ 'filename' , 'filename2' ] ,
 "succMap" : {
   "filename3" : "filepath3" ,
   "filename3" : "filepath3"
   }
 }
}
  • オフサイトの写真が失敗するのを防ぐために、 linkToImgUrlクリップボード内のオフサイトの画像アドレスをサーバーに渡すことができます。そのデータ構造は次のとおりです。 
 // POST data
xhr . send ( JSON . stringify ( { url : src } ) ) ; // src 为站外图片地址
// return data
{
 msg : '' ,
 code : 0 ,
 data : {
   originalURL : '' ,
   url : ''
 }
}
  • success 、 format 、 error同時にトリガーされません。特定の呼び出し状況は次のとおりです。 
 if ( xhr . status === 200 ) {
    if ( vditor . options . upload . success ) {
        vditor . options . upload . success ( editorElement , xhr . responseText ) ;
    } else {
        let responseText = xhr . responseText ;
        if ( vditor . options . upload . format ) {
            responseText = vditor . options . upload . format ( files as File [ ] , xhr . responseText ) ;
        }
        genUploadedLabel ( responseText , vditor ) ;
    }
} else {
    if ( vditor . options . upload . error ) {
        vditor . options . upload . error ( xhr . responseText ) ;
    } else {
        vditor . tip . show ( xhr . responseText ) ;
    }
}
説明しますデフォルト値
URL URLが空になった場合、アップロード関連のイベントはトリガーされません。 ''
マックスファイルの最大バイトをアップロードします10 * 1024 * 1024
linktoimgurlクリップボードに画像アドレスが含まれている場合は、このURLを使用して再びアップロードします''
linktoimgcallback（responsetext：string）画像アドレスコールバックをアップロードします -
linktoimgformat（responsetext：string）：string画像アドレスによってアップロードされた返品値をフォーマットします -
成功（編集者：htmlpreelement、msg：string）正常にコールバックをアップロードします -
エラー（MSG：文字列）失敗したコールバックをアップロードします -
トークンCORSアップロード確認、ヘッダーはX-Upload-Tokenです -
Credentialsでクロスサイトアクセス制御間違い
ヘッダーヘッダー設定をリクエストします -
filename（name：string）：文字列ファイル名のセキュリティ処理name => name.replace（/ w/g、 ''）
受け入れる入力承認と同じファイルアップロードタイプ -
validate（files：file []）=> string |ブール確認して、成功した場合はtrueを返します -
ハンドラー（ファイル：file []）=> string | null |約束|約束カスタムアップロード、エラーメッセージが発生したときにエラーメッセージを返します -
format（files：file []、responsetext：string）：stringサーバーによって返されたデータを変換して、組み込みのデータ構造を満たす -
file（files：file []）：file [] |約束<ファイル[]>戻る前にアップロードされたファイルを処理します -
setheaders（）：{[key：string]：string}アップロードする前に、返品値を使用してヘッダーを設定します -
Extradata：{[key：string]：string |ブロブ} FormDataに追加のパラメーターを追加します -
複数複数のアップロードされたファイルはありますか真実
フィールド名フィールド名をアップロードします'ファイル[]'
renderlinkdest？（vditor：ivditor、node：ilutenode、Entering：boolean）：[string、number]クリップボードの画像アドレスを処理します''

options.resize

説明しますデフォルト値
有効にするサイズのドラッグがサポートされていますか？間違い
位置ドラッグバーの位置：「トップ」、「ボトム」 '底'
after（height：number）コールバックはドラッグで終了しました -

options.classes

説明しますデフォルト値
プレビュープレビュー要素のクラス名''

options.fullscreen

説明しますデフォルト値
索引フル画面レベル90

options.outline

説明しますデフォルト値
有効にする初期化にアウトラインが表示されるかどうか間違い
位置アウトラインの場所：「左」、「右」 '左'

方法

説明します
exportjson（マークダウン：文字列） Markdownによると、対応するJSONを取得します
getValue（）マークダウンコンテンツを取得します
gethtml（） HTMLコンテンツを取得します
InsertValue（value：string、render = true）コンテンツをフォーカスに挿入し、デフォルトでマークダウンレンダリングを使用します
集中（）編集者に焦点を当てます
blur（）編集者を焦点を合わせてください
無効（）編集者を無効にします
有効にする（）編集者は執行不能です
getSelection（）：文字列選択した文字列を返します
setValue（MarkDown：String、ClearStack = false）エディターのコンテンツを設定し、クリア履歴スタックを選択します
ClearStack（）元に戻してレコードのスタックをやり直します
renderpreview（value？：文字列）プレビューエリアコンテンツを設定します
getCursorposition（）：{top：number、left：number}フォーカスポジションを取得します
deletevalue（）選択したコンテンツを削除します
updateValue（値：文字列）選択したコンテンツを更新します
isuploading（）アップロードはまだ進行中です
ClearCache（）クリアキャッシュ
disabledcache（）キャッシュを無効にします
enableCache（）キャッシュを有効にします
html2md（value：string） HTMLからMDへ
ヒント（テキスト：文字列、時間：番号）メッセージプロンプト。時間は0で、表示されます
setPreviewMode（モード： "の両方" | "editor"）プレビューモードを設定します
setTheme（テーマ：「ダーク」|「クラシック」、ContentTheem？：string、codetheem？：string、contentthemepath？：string）テーマ、コンテンツテーマ、コードブロックスタイルを設定します
getCurrentMode（）：文字列エディターの現在の編集モードを取得します
破壊する（）編集者を破壊します
getCommentIds（）：{id：string、top：number} []すべてのコメントを取得します
hlcommentids（ids：string []）コメントを強調表示します
unhlcommentids（ids：string []）コメントとハイライトをキャンセルします
RemoveCommentids（removeids：string []）コメントを削除します
updatetoolbarconfig（config：{hide？：boolean、pin？：boolean}）ツールバーの構成を更新します

静的方法

  • 編集する必要がない場合は、 method.min.jsを導入して、次のように直接呼び出すだけです
 Vditor . mermaidRender ( document ) 
 import VditorPreview from 'vditor/dist/method.min'
VditorPreview . mermaidRender ( document )
  • ページでマークダウンをレンダリングする必要がある場合、 previewメソッドを直接呼び出すことができます。パラメーターは次のとおりです。 
previewElement: HTMLDivElement ,   // 使用该元素进行渲染
markdown : string ,  // 需要渲染的 markdown 原文
options ?: IPreviewOptions {
  mode : "dark" | "light" ;
  anchor?: number ;  // 为标题添加锚点 0：不渲染；1：渲染于标题前；2：渲染于标题后，默认 0
  customEmoji?: { [ key : string ] : string } ;    // 自定义 emoji，默认为 {}
  lang?: ( keyof II18nLang ) ;    // 语言，默认为 'zh_CN'
  emojiPath?: string ;    // 表情图片路径
  hljs?: IHljs ; // 参见 options.preview.hljs
  speech?: {  // 对选中后的内容进行阅读
    enable ?: boolean ,
  } ;
  math?: IMath ; // 数学公式渲染配置
  cdn?: string ; // 自建 CDN 地址
  transform ? ( html : string ) : string ; // 在渲染前进行的回调方法
  after ? ( ) ; // 渲染完成后的回调
  lazyLoadImage?: string ; // 设置为 Loading 图片地址后将启用图片的懒加载
  markdown?: options . preview . markdown ;
  theme?: options . preview . theme ;
  render?: options . preview . render ;
  renderers?: ILuteRender ; // 自定义渲染 https://ld246.com/article/1588412297062
}
  • ショ和method.min.jsとindex.min.js同時に導入できません
説明します
previewimage（oldimgelement：htmlimageElement、lang：keyof ii18n = "zh_cn"、thema = "classic"）画像をクリックしてプレビューします
MermaidRender（要素：htmlelement、cdn = options.cdn、theme = options.theme）フローチャート/タイムチャート/ガントチャート
SmilesRender（要素：htmlelement、cdn = options.cdn、theme = options.theme）化学物質構造
MarkMapRender（要素：htmlelement、cdn = options.cdn）マークダウンマインドマップ
FlowChartrender（要素：htmlelement、cdn = options.cdn）フローチャートレンダリング
Coderender（要素：htmlelement、option？：ihljs）要素のコードブロックにコピーボタンを追加する
chartrender（element：（htmlelement | document）= document、cdn = options.cdn、theme = options.theme）チャートレンダリング
MindMapRender（要素：（htmLelement | document）= document、cdn = options.cdn、theme = options.theme）脳画像レンダリング
PlantumlRender（要素：（htmLelement | document）= document、cdn = options.cdn） Plantumlレンダリング
abcrender（要素：（htmlelement | document）= document、cdn = options.cdn）ステッチレンダリング
md2html（mdtext：string、options？：ipreviewoptions）：Promise <String>マークダウンテキストはHTMLに変換されます。この方法では非同期プログラミングが必要です
プレビュー（previewelement：htmldivelement、markdown：string、options？：ipreviewoptions）ページマークダウンの記事レンダリング
highlightrender（hljsoption？：ihljs、element？：htmlelement | document、cdn = options.cdn）要素のコードブロックのレンダリングを強調表示します
Mediarender（要素：htmlelement）特定のリンクのためにビデオ、オーディオ、埋め込みのiframesとしてレンダリング
MathRender（要素：HTMLELEMENT、OPTIONS？：{cdn？：string、math？：imath}）数学式のレンダリング
SpeechRender（要素：htmlelement、lang？:（ keyof ii18nlang））選択したテキストを読んでください
GraphVizRender（要素：htmlelement、cdn？：string） GraphVizをレンダリングします
outlinerender（contentelement：htmlelement、ターゲットエレメント：要素）アウトラインをレンダリングします
lazyloadimagerender（要素：（htmlelement | document）= document）怠zyなロードを有効にした写真をレンダリングします
setCodetheem（codetheem：string、cdn = options.cdn）コードテーマを設定し、options.preview.hljs.style for codetheemを参照してください
setContentTheme（contenttheme：string、path：string）コンテンツのテーマを設定し、Options.preview.theme.list for contentthemeを参照してください。

？開発文書

原則関連

  • WysiWyg Markdownエディターに関する議論
  • vditorはマークダウンを実装しているものがあなたが得るものです
  • Luteは、中国のコンテキストを最適化し、GoとJavaScriptをサポートするマークダウンエンジンです

環境

  1. ノードLTSバージョンをインストールします
  2. 最新のコードをダウンロードして減圧します
  3. ルートディレクトリからnpm installを実行します
  4. npm run start start start local serverを起動し、http：// localhost：9000を開きます
  5. コードを変更します
  6. npm run build

CDNスイッチ

オンデマンドロードメカニズムの使用により、デフォルトのCDNはhttps://unpkg.com/vditor@バージョン番号です

コードが変更されている場合、または自己構築されたCDNを使用する必要がある場合は、次の手順に従うことができます。

  • 初期化するときは、 cdn 、 emojiPath 、およびthemes optionsとIPreviewOptions
  • highlightRender 、 mathRender 、 abcRender 、 chartRender 、 mermaidRender 、 SMILESRender 、 markmapRender 、 flowchartRender 、 mindmapRender 、 plantumlRender 、 graphvizRender 、 setCodeTheme 、 setContentThemeメソッドはCDNパラメーターを追加する必要があります
  • 成功したビルドまたはjsdelivrのdistディレクトリを正しい場所にdistディレクトリをコピーします

アップグレード

バージョンをアップグレードするときは、changelogのアップグレードパーツを注意深くお読みください

ⓜⓜ️マークダウンユーザーガイド

  • 基本的な構文
  • 拡張構文
  • クイックチェックマニュアル

？€コミュニティ

  • 公式ウェブサイト
  • ディスカッションエリア
  • 問題を報告します

？許可

VDitorはMITオープンソースプロトコルを使用します。

認める

  • リュート：？ GOとJavaScriptをサポートする構造化されたマークダウンエンジン
  • Highlight.js：JavaScript Syntax Highlighter
  • マーメイド：マークダウンと同様の方法でテキストからの図とフローチャートの生成
  • Incubator-CeeCharts：ブラウザ用の強力でインタラクティブなチャート作成および視覚化ライブラリ
  • ABCJS：ブラウザで標準音楽表記をレンダリングするためのJavaScriptライブラリ

歴史

Symの開発の初期には、WysiWyg Rich Text Editorを直接使用しました。当時、HTMLベースの編集者は非常に人気があり、プロジェクトでの引用に非常に便利であり、当時のユーザーの使用習慣に沿っていました。

その後、Markdownの台頭により、全員のレイアウトが徐々に変わりました。さらに、他のプロジェクトのいくつかはプログラマー向けであるため、MDへの移行も一般的な傾向です。開発者にリッチなプログラミングインターフェイスを提供し、さまざまなブラウザとの互換性がある優れたエディターであるCodemirrorを選択しました。

その後、プロジェクトビジネスのニーズが解決するにつれて、Codemirrorを使用することで「面倒」と感じることがあります。たとえば、@automativeでユーザー名リストを完了し、絵文字を挿入し、ファイルをアップロードするなど、比較的詳細な二次開発が必要であり、これらのビジネスニーズはまさに多くのプロジェクトシナリオが持っているものであり、必要です。

最後に、Symでエディターを実装し始めることにしました。いくつかのバージョンの反復により、Symのエディターはますます成熟しています。私たちが運営しているコミュニティチェーンでは、一部の人々は、エディターを個別に引き出して、使用するために全員に提供できるかどうかを尋ねました。同時に、フロントエンドのメインプログラムVクラスは、さまざまなプロジェクトに散らばった編集者を維持することに少し圧倒され、Typescriptの印象もありました。そのため、TSを使用して真新しいブラウザサイドMDエディターを実装することにしました。

それで、vditorが生まれました。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて