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

2018-10-14
html5css3javascript
    

目次

概要

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;
}
    

関連記事

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

next_permutationをJSで実装する
ソース 使い方 参考 C++で提供されている順列を生成する next_permutation のJS実装です。 ソース 順列が存在する場合はtrueを返し、そうでなければfalse…

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

JSで32ビット符号付き整数に対してのビット演算でハマった
具体例 参考にしたサイト JSでサブネットマスクの計算を行おうとしたとき、ビット演算でハマりました。その時のメモです。 JSでサブネットマスクの計算 JSでビット演算子を利用する場合 3…

JSでIPアドレスがサブネットマスクで指定した範囲内にあるか判定する
IPアドレスが指定した範囲内にあるかどうか判定 参考にしたサイト JSでIPアドレス(IPv4)が指定したサブネットの範囲に含まれるか判定するロジックを作った時の記録です。 IPアドレスが指定した範囲内にあるかどうか判定 処理としては、IP…

プログラムの数値計算で発生する誤差の種類 丸め誤差・打ち切り誤差・桁落ち
はじめに 誤差の種類 丸め誤差 打ち切り誤差 桁落ち 情報落ち 桁溢れ誤差 参考にしたサイト コンピュータで出てくる誤差はいくつかありますが、 それらをコードに落として整理しました。 はじめに 例えば の計算の答えは 0.6666666666…

JSでサブネットマスクの計算
JSによるサブネットマスク関連の計算 IPv4アドレス文字列をNumber型に変換する CIDR と サブネットの相互変換 ネットワークアドレス と ブロードキャストアドレス クラス 改めて計算方法を整理する 参考にさせていただいたサイト JSでIPv…

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

最新の投稿

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

AWS Amplify で コンテナベースのデプロイを行い REST API を構築
検証した環境 やってみる 初期準備 パイプラインを確認 終了処理 参考 AWS Amplify で コンテナベースのデプロイを行い REST API を構築した際のメモです。 検証した環境 amplify 5.1.…

Pythonでソケット通信を実装しメッセージの送受信を行う
ソース server.py client.py 動かしてみる 参考 Pythonでソケット通信を実現する方法です。 ソース server.py サーバ側のソースです。 client.py…

next_permutationをJSで実装する
ソース 使い方 参考 C++で提供されている順列を生成する next_permutation のJS実装です。 ソース 順列が存在する場合はtrueを返し、そうでなければfalse…

応用情報技術者試験の合格体験記
受験時のステータス 受験結果 対策 スケジュール 午前問題 午後問題 参考書等 令和…

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

CentOS8 に Python + OpenCV をインストール
インストール テスト CentOS8 で標準で提供されているパッケージで Python + OpenCV 環境を構築する方法です。 検証した環境は CentOS8.3 (Docker) です。 インストール まず opencv…

[Perl] CentOS8 に plenv をインストール
インストール Step1 事前準備 Step2 PATHを通す (README通りにインストール) Step2 PATHを通す ($HOME以外にplenvをインストール) Step3 Perlインストール Step4 cpanmインストール CentOS…

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

Tags

Dates

s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV
© 2021   404 motivation not found