Vue-Quill-Editorとは

 

Vue-Quill-Editor」はVue.js製のリッチテキストエディタを実装するライブラリです。

元々は「Quill Rich Text Editor」というGithubのスター 20,000 を超えるリッチテキストエディタです。

Quillは編集と文字を念頭に置いて設計されており、これらの自然なテキスト中心にAPIを構築されています。

 

インストール

以下のnpmを使ってインストールします。

npm

npm install vue-quill-editor --save

 

gitリポジトリは以下から取得できます。

https://github.com/surmon-china/vue-quill-editor

 

導入手順

1. ライブラリの取り込み

webpack等の場合

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

WEBページの場合

<link rel="stylesheet" href="./node_modules/quill/dist/quill.core.css"/>
<link rel="stylesheet" href="./node_modules/quill/dist/quill.snow.css"/>
<link rel="stylesheet" href="./node_modules/quill/dist/quill.bubble.css"/>
<script type="text/javascript" src="./node_modules/quill/dist/quill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="./node_modules/vue-quill-editor/dist/vue-quill-editor.js"></script>
<script type="text/javascript">
  Vue.use(window.VueQuillEditor)
</script>

2. methodsを準備

new Vue({
  el: "#app",
  data: {
    content: 'Hellow contents',
    editorOption: {
        theme: 'snow'
    }
  }
})

3. テンプレートを準備

<div id="app">
   <quill-editor v-model="content" 
                 ref="quillEditor"
                 options="editorOption"></vue-quill-editor>
</div>

 

デモ

>>専用ページで確認する

※iframeに呼び出すと動作が不安定みたいです。
可能であればJSFiddleでご確認ください。

 

まとめ

Vue-Quill-Editor」でリッチテキストエディタを実装するでした。

普段リッチテキストエディタを実装する時は、TinyMCEを使ってしまうのですが、最近あちらがサブスクに移行つつあるので、商用無料として「Vue-Quill-Editor」は候補の1つになりそうです。

 

今日はこの辺でー

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください