始めに
- Vueで利用できるMarkDownEditorを調べる
MarkDownEditor
Star 約8K simplemde.com
Star 約12K github.com
Star 約4K github.com
ExcelをMarkdownに変換するライブラリ
- starの数が少ないのしか見つかりませんでした。 github.com
検証用のプロジェクトの作成
- 下記のコマンドでプロジェクトを作成する
vue create vue2_example
- vue2を選択する
Vue CLI v4.5.8 ┌─────────────────────────────────────────┐ │ │ │ New version available 4.5.8 → 4.5.9 │ │ Run npm i -g @vue/cli to update! │ │ │ └─────────────────────────────────────────┘ ? Please pick a preset: (Use arrow keys) ❯ Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features
- 使うかわからないが、typescriptとrouterとvuexはインストールする
cd vue2_example vue add typescript vue-router vuex ? Still proceed? Yes ? Use class-style component syntax? (Y/n)
mavonEditorをインストールする
- 下記の２つの方法のインストール方法を試してみましたが、
vue add mavon-editor or yarn add vue-cli-plugin-mavon-editor -D --tilde
下記のエラーが発生してインストールすることができませんでした。
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
- 下記のコマンドでインストールすることができました。
yarn add mavon-editor
実装
App.vueファイルの内容
<template>
<div id="app">
<mavon-editor v-model="value"/>
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);
export default Vue.extend({
name: 'App',
components: {
HelloWorld
}
});
</script>
実際の画面
- 画像もアップロードできてよかった。
次の検証
- Excelのペースト
- サーバーにデータを送信して保存などの検証
補足
- 下記の記述にしないとエディタが日本語仕様にならない。デフォルトは中国語？のようです。
<mavon-editor v-model="test2" style="height: 100%" language="ja"></mavon-editor>
