vue simplemde

vue-simplemde

vue.jsのMarkdownエディターコンポーネントvue2.xのみをサポートします。

セットアップを使用します

vue1.xをサポートしなくなり、使用して変更できます

インストール

npm install vue-simplemde --save

使用

• 単一のコンポーネントの内部参照

< template >
  < vue-simplemde v-model = " content " ref = " markdownEditor " />
</ template >

< script >
  import VueSimplemde from ' vue-simplemde '

  export default {
    components : {
      VueSimplemde
    }
  }
</ script >

< style >
  @import ' ~simplemde/dist/simplemde.min.css ' ;
</ style >

• グローバルリファレンス

 import Vue from 'vue'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'

Vue . component ( 'vue-simplemde' , VueSimplemde ) 

小道具

財産	タイプ	デフォルト	説明する
価値	弦	なし	初期値、Vモデルバインディングを使用できます
名前	弦	なし	コントロールの名前。
プレビュークラス	弦	なし	カスタムプレビュースタイルクラス
Autoinit	ブール	真実	自動初期化
forcencync	ブール	真実	毎回SimpleMdeに値を同期します
ハイライト	ブール	間違い	ハイライトすることは開かれていますか
消毒します	ブール	間違い	開いた後に入力をレンダリングしないHTML
構成	物体	{}	Simplemdeの構成
プレビューレンダー	関数	-	configs.previewRender

イベント

イベント	説明する	議論
入力	入力値が変更されたときにトリガーされます	価値
ぼやけ	入力が焦点を失ったときにトリガーされます	価値
初期化	初期化が完了したときにトリガーされます	Simplemde

方法

 this . $refs . markdownEditor . simplemde . togglePreview ( ) ;

• 例/index.vue

• Simplemde.js

マークダウンスタイル

たとえば、Githubのマークダウンスタイルを使用します

github-markdown-css

インストール

$ npm install --save github-markdown-css

使用

< template >
  < vue-simplemde preview-class = " markdown-body " />
</ template >

< style >
  @import ' ~simplemde/dist/simplemde.min.css ' ;
  @import ' ~github-markdown-css ' ;
</ style >

ハイライト

インストール

 $ npm install --save highlight.js

使用

< template >
  < vue-simplemde :highlight = " true " />
</ template >

< script >
  import hljs from ' highlight.js ' ;

  window . hljs = hljs;
</ script >

< style >
  @import ' ~simplemde/dist/simplemde.min.css ' ;
  @import ' ~highlight.js/styles/atom-one-dark.css ' ;
  /* Highlight theme list: https://github.com/isagalaev/highlight.js/tree/master/src/styles */
</ style >

編集者のテーマ（Simplemde-Theme-base）

たとえば、Simplemde-Theme-Baseテーマを使用します

インストール

 $ npm install --save simplemde-theme-base

使用

< style >
  @import ' ~simplemde-theme-base/dist/simplemde-theme-base.min.css ' ;
  /* no need import simplemde.min.css */
</ style >

例えば

暗いテーマ

構成

Simplemdの構成

• 中文
• 英語

例

• 簡単な例
• nuxtの例
• デモページ
• デモソース

依存関係

• Simplemde

ライセンス

Vue-Simplemdeはオープンソースであり、MITライセンスの下でリリースされます。

著作権（c）2022 f-loat