Vue.jsで使えるWYSIWYGエディター「vue-froala-wysiwyg」

vue-froala-wysiwygとは

vue-froala-wysiwygは、Vue.jsで使えるWYSIWYGエディターコンポーネントライブラリです。

100か国以上で使用されており、日本語の言語パッケージも用意されています。

個別の機能プラグインを使う場合は、有償のライセンスを購入する必要があります。
https://www.froala.com/wysiwyg-editor/pricing

環境

インストール

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

npm

npm install vue-froala-wysiwyg --save

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@3.1.0/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@3.1.0/css/froala_style.min.css">
<script src="https://cdn.jsdelivr.net/npm/froala-editor@3.1.0/js/third_party/spell_checker.min.js"></script>

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

https://github.com/froala/vue-froala-wysiwyg

導入手順

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

（1）webpack等の場合 [注意]モジュール版は未検証です。

import VueFroala from 'vue-froala-wysiwyg';

（2）WEBページの場合

const VueFroala = window['vue-froala-wysiwyg'].default;

2.メソッドを設定

上記で作成したVueFroalaをVue.useに取り込みます。

Vue.use(VueFroala);
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    froalaData: 'Edit Your Content Here!',
    config: {
      events: {
        initialized: function () {
          console.log('initialized')
        }
      }
    }
  }
});

3. テンプレートを準備

<froala> を設置します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <froala id="edit" :tag="'textarea'" :config="config" v-model="froalaData"></froala>
</div>

サンプル

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

さいごに

Vue.jsで使えるWYSIWYGエディターコンポーネントライブラリでした。

今日はこの辺でー