mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介

mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介

2018-10-1410 min read

目次

  1. 概要
  2. mavoneditor
  3. セットアップ
  4. カスタマイズ
  5. apiの紹介

概要

mavonEditor + Vue.js で作るMarkdownエディタについての紹介です。 また、用意されているAPIなどについて少し紹介します。

mavonEditor

https://github.com/hinesboy/mavonEditor

中国語と英語のドキュメントが用意されています。 またデフォルトの言語も中国語になっています。

セットアップ

基本的には複雑な設定を不要とし、以下のコードで動きます。

HTML

<div id="app">
  <mavon-editor></mavon-editor>
</div>

JavaScript

Vue.use(window['mavon-editor'])
var app = new Vue({
    el: '#app'
})

カスタマイズ

特に設定も必要なく上記のコードで動きます。 拡張する場合はいくつかのプロパティなどを定義する必要があります。

これは、mavon-editor内に記述されたメソッドをエディタ外部のDOMに吐き出すデモです。

デモ

コード

<div id="app">
    <div class="editor">
        <mavon-editor fontSize="26" language="en" scrollStyle="false" placeholder="Markdown形式で入力してください。" boxShadow="false"  :toolbars="toolbars" v-on:imgAdd="$imgAdd" v-on:change="$change" ></mavon-editor>
    </div>
    <button @click="getMsg">getMsg</button>
    <div>{{ message }}</div>
</div>
Vue.use(window['mavon-editor'])

var app = new Vue({
    el: '#app',
    data() {
        return {
            //mavon-editor
            toolbars: {
                bold: false,
            },
            //other
            message: ''
        }
    },
    methods: {
        $imgAdd(pos, $file) {
            alert('upload image');
        },
        $change(value, reader) {
            this.message = value
        },
        getMsg() {
            console.log(this.message)
        }
    },
})

APIの紹介

用意されているAPIには以下のようなものがあります。

プロパティ

プロパティ一覧。 ここから引用

name type default value describe
value String Initial value
language String zh-CN Language switch, zh-CN: Simplified Chinese , en: English , fr: French, pt-BR: Brazilian Portuguese, ru: Russian
fontSize String 15px font-size of edit area
scrollStyle Boolean true Open the scroll bar style(Temp only support chrome)
boxShadow Boolean true css: box-shadow of mavonEditor
subfield Boolean true true: Double columns - Edit preview same screen , Single Columns - otherwise not
defaultOpen String edit: default show edit area , preview: default show preview area , other = edit
placeholder String Begin editing... The default prompt text when the textarea is empty
editable Boolean true Edit switch
codeStyle String code-github markdown Style: default github, option hljs color scheme
toolbarsFlag Boolean true Show toolbars
navigation Boolean false Show navigation
ishljs Boolean true highlight code switch
imageFilter Function null Image file filter Function, params is a File Object, you should return Boolean about the test result
imageClick function null Image Click Function
toolbars Object As in the following example toolbars

ツールバー

上記のプロパティのtoolbarsに関しては以下のようなオブジェクトを定義した上で渡す必要があります。

toolbars: {
      bold: true,
      italic: true,
      header: true,
      underline: true,
      strikethrough: true,
      mark: true,
      superscript: true,
      subscript: true,
      quote: true,
      ol: true,
      ul: true,
      link: true,
      imagelink: true,
      code: true,
      table: true,
      fullscreen: true,
      readmodel: true,
      htmlcode: true,
      help: true,
      /* 1.3.5 */
      undo: true,
      redo: true,
      trash: true,
      save: true,
      /* 1.4.2 */
      navigation: true,
      /* 2.1.8 */
      alignleft: true,
      aligncenter: true,
      alignright: true,
      /* 2.2.1 */
      subfield: true,
      preview: true
  }

イベントメソッド

イベントメソッドには次のようなものが用意されています。

name params describe
change String: value , String: reder Edit area change callback event (render: Html source code)
save String: value , String: reder Ctrl+s and click save button
fullScreen Boolean: status , String: value Fullscreen editing toggle callback event(boolean: Fullscreen status)
readModel Boolean: status , String: value Reading mode toggle callback event(boolean: Reading mode status)
htmlCode Boolean: status , String: value Html code mode toggle callback event(boolean: status)
subfieldToggle Boolean: status , String: value Double columns edit mode toggle callback event(boolean: double columns status)
previewToggle Boolean: status , String: value Preview & Edit toggle callback event(boolean: preview status)
helpToggle Boolean: status , String: value Help-me toggle callback event(boolean: help status)
navigationToggle Boolean: status , String: value Navigation mode toggle callback event(boolean: nav status)
imgAdd String: filename, File: imgfile Add image file callback event(filename: write in origin md, File: File Object)
imgDel String: filename Delete image file callback event(filename: write in origin md)

おまけ : mavonEditorのサイズの固定

デフォルトの状態だと改行した際にウィンドウがでかくなっていきます。

もしかしたら適切なプロパティが用意されているのかもしれませんが、 cssに以下のような属性を適用させたことで、ウィンドウサイズを固定できました。

.markdown-body {
    max-height: 600px;
    height: 600px;
}
Recommends
mavonEditor と Vue.js で作るMarkdownエディタのデモ + API...
2018-10-14
html5
css3
javascript
JSでルーレットを作った。
2018-09-02
html5
css3
javascript
【JavaScript】凸包(グラハムスキャン)を可視化・アニメーション【Canvas】
2018-06-21
html5
css3
javascript
【JavaScript】K-meansをアニメーション・可視化したら蜘蛛みたいな動きをした...
2018-06-10
html5
css3
javascript
FileAPIで画像を読み込み canvasに描画
2018-01-22
html5
css3
javascript
Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
2020-03-23
html5
javascript
vue.js
MonacoEditor + Vue を使ってエディタを実装
2019-06-23
html5
javascript
monaco%20editor
async awaitで画像を読み込み canvasに描画 JavaScript
2019-06-23
html5
javascript
canvas
JavaScriptで画像のヒストグラムの正規化
2019-06-10
html5
javascript
canvas
画像のヒストグラムを表示する Chart.js JavaScript canvas
2019-05-26
html5
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
画像のプーリング処理 canvas + JavaScript
2019-05-19
html5
javascript
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92
JSで画像をまとめて読み込む(プリロードする)
2019-05-06
html5
javascript
画像にモザイクをかける JavaScript canvas デモあり
2019-01-24
html5
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
回転ルーレットを作る JavaScript + canvas
2019-01-17
html5
javascript
canvas
文字列のAAを自動生成 デモ + サンプルコード JavaScript
2019-01-03
html5
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
New Posts
[AWS CDK]S3 CloudFront OAI Route53 構成 で NextJ...
2022-05-23
amazon%20aws
aws%20cdk
typescript
[CDK]SNS+SQS+DynamoDBでBounceとComplaint情報を収集する...
2022-04-11
amazon%20aws
node.js
typescript
[AmazonSES] node.js と ejs を利用してEメールを送信する
2022-04-09
javascript
node.js
amazon%20aws
GatsbyからNext.jsへのサイト移行
2022-04-04
next.js
gatsby
amazon%20aws
[AWS CDK] Lambda で S3 オブジェクトを読み書きするStackの構築
2022-03-18
aws%20cdk
amazon%20aws
typescript
[AWS CDK] S3 + CloudFrontの構築とOriginAccessIden...
2022-03-09
amazon%20aws
aws%20cdk
typescript
[AWS CDK] Bastion(踏み台)構築。SSMとEC2InstanceConne...
2022-03-06
amazon%20aws
aws%20cdk
node.js
[AWS CDK] Cognito を構築
2022-03-04
amazon%20aws
aws%20cdk
node.js
AWS CDK v2 でVPC上にAPI Gateway + Lambda + RDS +...
2022-02-28
amazon%20aws
aws%20cdk
node.js
javascriptで累積和を解く
2022-02-27
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%83%9F%E3%83%B3%E3%82%B0
atcoder
AWS Amplify で monorepo を導入し 単一リポジトリで複数プロジェクトを...
2022-02-25
git
github
amazon%20aws
AWS CDK v2 で Lambda関数のデプロイ
2022-02-23
typescript
amazon%20aws
aws%20cdk
NextJSでDevToysのようなものを作成した
2022-02-22
javascript
typescript
vercel
JSで動的計画法を利用して部分和問題を解く
2022-02-20
javascript
typescript
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
NestJSアプリケーションをwebpackでBundle
2022-02-20
javascript
typescript
nestjs
Hot posts!
Proxy環境下でcurlを実行する
2019-12-07
linux
curl
OpenCVのMatのタイプ一覧表
2018-11-25
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
opencv
Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など
2019-12-21
linux
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9
mysql
TablePlusを使ってみる。シンプルでモダンなSQLクライアントツール
2018-09-30
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9
DBクライアントツールはDBeaverをおすすめしたい
2021-03-08
oracle
mysql
sqlite
AWS S3のアクセスキーIDとシークレットアクセスキーの取得 作業用ユーザを作成
2019-06-12
amazon%20aws
linux
amazon%20s3
AtCoderで初めて色がつくまでの話(茶色) レートが中々上がらなかった原因
2018-11-25
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0
%E9%9B%91%E8%AB%87
CentOS8でEPELとPowerToolsリポジトリの有効化
2020-11-30
centos
red%20hat
EPEL
Macでターミナルからポートスキャンを行う方法。
2018-12-09
linux
mac
apple
Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する
2018-11-27
python
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
opencv
Date
▶︎
2022 年 (22)
▶︎
2021 年 (40)
▶︎
2020 年 (30)
▶︎
2019 年 (90)
▶︎
2018 年 (89)
▶︎
2017 年 (1)
Tags
javascript(92)
linux(47)
amazon%20aws(40)
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0(36)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86(30)
node.js(30)
html5(29)
centos(24)
php(23)
python(22)
typescript(21)
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0(20)
canvas(18)
mac(18)
opencv(17)
mysql(17)
%E9%9B%91%E8%AB%87(15)
wordpress(15)
docker(14)
atcoder(13)
apache(12)
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92(12)
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9(12)
red%20hat(12)
ubuntu(11)
amazon%20s3(11)
github(10)
git(10)
vue.js(10)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF(10)
css3(8)
%E5%8F%AF%E8%A6%96%E5%8C%96(8)
%E5%B0%8F%E3%83%8D%E3%82%BF(8)
mariadb(8)
amazon%20lightsail(7)
react(7)
aws%20cdk(7)
%E3%83%96%E3%83%AD%E3%82%B0(6)
cms(6)
oracle(6)
perl(6)
gitlab(6)
next.js(6)
iam(5)
amazon%20ec2(5)
aws%20amplify(5)
curl(4)
webassembly(4)
ssh(4)
homebrew(4)
Author
s-yoshiki
s-yoshiki
githubzenntwitterqiita
ただの備忘録です。
JavaScript/TypeScript/node.js/React/AWS/OpenCV
※このブログの内容は個人の見解であり、所属する組織等の見解ではありません。