Vue3 でマークダウン エディター コンポーネントを使用する方法

# npm の使用
npm を @kangc/v-md-editor@next -S にコピーします。

# 糸を使う
糸を追加 @kangc/v-md-editor@next

'vue' から creatApp をインポートします。
'@kangc/v-md-editor' から VMdEditor をインポートします。
'@kangc/v-md-editor/lib/style/base-editor.css' をインポートします。
'@kangc/v-md-editor/lib/theme/github.js' から githubTheme をインポートします。
'@kangc/v-md-editor/lib/theme/style/github.css' をインポートします。

VMdEditor.use(githubTheme);

const app = creatApp(/*...*/);

app.use(VMdEditor);

<テンプレート>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</テンプレート>

<スクリプト>
'vue' から { ref } をインポートします。

エクスポートデフォルト{
  設定 （） {
    定数テキスト = ref('');
    
    戻る {
      文章
    }
  }
}
</スクリプト>

<テンプレート>
  <v-md-editor :value="マークダウン" モード="プレビュー"></v-md-editor>
</テンプレート>

<スクリプト>
'vue' から { ref } をインポートします。

エクスポートデフォルト{
  設定 （） {
    const マークダウン = ref('');
    
    戻る {
      マークダウン
    }
  }
}
</スクリプト>

// メイン.js
'vue' から creatApp をインポートします。
'@kangc/v-md-editor/lib/preview' から VMdPreview をインポートします。
'@kangc/v-md-editor/lib/style/preview.css' をインポートします。
// 使用しているテーマをインポートします。ここでは、github テーマを例に挙げます。import githubTheme from '@kangc/v-md-editor/lib/theme/github';
'@kangc/v-md-editor/lib/theme/style/github.css' をインポートします。

VMdPreview.use(githubTheme);

const app = creatApp(/*...*/);

app.use(VMdPreview);

<テンプレート>
  <v-md-preview :text="マークダウン"></v-md-preview>
</テンプレート>

<スクリプト>
'vue' から { ref } をインポートします。

エクスポートデフォルト{
  設定 （） {
    const マークダウン = ref('');
    
    戻る {
      マークダウン
    }
  }
}
</スクリプト>

// メイン.js
'vue' から creatApp をインポートします。
'@kangc/v-md-editor/lib/preview-html' から VMdPreviewHtml をインポートします。
'@kangc/v-md-editor/lib/style/preview-html.css' をインポートします。

// テーマのスタイルをインポートします。 import '@kangc/v-md-editor/lib/theme/style/vuepress';

const app = creatApp(/*...*/);

app.use(VMdPreviewHtml);

<テンプレート>
  <!-- preview-class はテーマのスタイル クラス名です。たとえば、vuepress の場合は vuepress-markdown-body です -->
  <v-md-preview-html :html="html" プレビュークラス="vuepress-markdown-body"></v-md-preview-html>
</テンプレート>

<スクリプト>
'vue' から { ref } をインポートします。

エクスポートデフォルト{
  設定 （） {
    const html = ref('<div data-v-md-line="1"><h1 align="center">Vue 上に構築された Markdown エディター</h1>');
    
    戻る {
      html
    }
  },
};
</スクリプト>