
mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介
2018-10-1410 min read
目次
概要

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
JSでルーレットを作った。
2018-09-02
【JavaScript】凸包(グラハムスキャン)を可視化・アニメーション【Canvas】
2018-06-21
【JavaScript】K-meansをアニメーション・可視化したら蜘蛛みたいな動きをした...
2018-06-10
FileAPIで画像を読み込み canvasに描画
2018-01-22
Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
2020-03-23
MonacoEditor + Vue を使ってエディタを実装
2019-06-23
async awaitで画像を読み込み canvasに描画 JavaScript
2019-06-23
JavaScriptで画像のヒストグラムの正規化
2019-06-10
画像のヒストグラムを表示する Chart.js JavaScript canvas
2019-05-26
画像のプーリング処理 canvas + JavaScript
2019-05-19
JSで画像をまとめて読み込む(プリロードする)
2019-05-06
画像にモザイクをかける JavaScript canvas デモあり
2019-01-24
回転ルーレットを作る JavaScript + canvas
2019-01-17
文字列のAAを自動生成 デモ + サンプルコード JavaScript
2019-01-03
New Posts
[AWS CDK]S3 CloudFront OAI Route53 構成 で NextJ...
2022-05-23
[CDK]SNS+SQS+DynamoDBでBounceとComplaint情報を収集する...
2022-04-11
[AmazonSES] node.js と ejs を利用してEメールを送信する
2022-04-09
GatsbyからNext.jsへのサイト移行
2022-04-04
[AWS CDK] Lambda で S3 オブジェクトを読み書きするStackの構築
2022-03-18
[AWS CDK] S3 + CloudFrontの構築とOriginAccessIden...
2022-03-09
[AWS CDK] Bastion(踏み台)構築。SSMとEC2InstanceConne...
2022-03-06
[AWS CDK] Cognito を構築
2022-03-04
AWS CDK v2 でVPC上にAPI Gateway + Lambda + RDS +...
2022-02-28
javascriptで累積和を解く
2022-02-27
AWS Amplify で monorepo を導入し 単一リポジトリで複数プロジェクトを...
2022-02-25
AWS CDK v2 で Lambda関数のデプロイ
2022-02-23
NextJSでDevToysのようなものを作成した
2022-02-22
JSで動的計画法を利用して部分和問題を解く
2022-02-20
NestJSアプリケーションをwebpackでBundle
2022-02-20
Hot posts!
Proxy環境下でcurlを実行する
2019-12-07
OpenCVのMatのタイプ一覧表
2018-11-25
Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など
2019-12-21
TablePlusを使ってみる。シンプルでモダンなSQLクライアントツール
2018-09-30
DBクライアントツールはDBeaverをおすすめしたい
2021-03-08
AWS S3のアクセスキーIDとシークレットアクセスキーの取得 作業用ユーザを作成
2019-06-12
AtCoderで初めて色がつくまでの話(茶色) レートが中々上がらなかった原因
2018-11-25
CentOS8でEPELとPowerToolsリポジトリの有効化
2020-11-30
Macでターミナルからポートスキャンを行う方法。
2018-12-09
Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する
2018-11-27
Date
▶︎
2022 年 (22)
▶︎
2021 年 (40)
▶︎
2020 年 (30)
▶︎
2019 年 (90)
▶︎
2018 年 (89)
▶︎
2017 年 (1)
Tags
Author