【Nuxt.js】WYSIWYGエディター: Quillを使ってみた

前置き

WYSIWYGエディタのQuillを使ってみました🍎✨
前回チャットアプリを作成していて
「シンタックスハイライターを使いたいなぁ〜
　どうせならエディタで色々やりたいなぁ〜」
ということで今回は人気のQuillを選びました💕

WYSIWYG（ウィジウィグ）エディターとは、ユーザーが編集画面で見ているものと、完成形の見た目が同じになるように作られているエディターのこと。「What You See Is What You Get（あなたが見たものを、そのまま出力できる）」という言葉の頭文字に由来します。
商用利用できるWYSIWYGエディター5選！Froala Editorの導入方法も解説

参考:
GitHubでスターが多いWYSIWYGエディタ（2019年11月）
ウィジウィグエディタのQuillを使ってみる

Quillのダウンロード

Quill: https://quilljs.com/docs/download/

npmでinstall
CDNのstylesheetやscriptは
nuxt公式の通りに
nuxt.configや
ページコンポーネントに入れ込みます。

⬇️CDN

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.core.js"></script>

⬇️nuxt.config.js

外部リソースを使うには？

export default {
  head: {
    script: [
      {
        src: '//cdn.quilljs.com/1.3.6/quill.js',
        src: '//cdn.quilljs.com/1.3.6/quill.min.js',
        // src: '//cdn.quilljs.com/1.3.6/quill.core.js',
      }
    ],
    link: [
      { rel: 'stylesheet', href: '//cdn.quilljs.com/1.3.6/quill.snow.css' },
      { rel: 'stylesheet', href: '//cdn.quilljs.com/1.3.6/quill.bubble.css' },
      // { rel: 'stylesheet', href: '//cdn.quilljs.com/1.3.6/quill.core.css' },
    ]
  },
  //
}

export default {

head: {

script: [

{

src: '//cdn.quilljs.com/1.3.6/quill.js',

src: '//cdn.quilljs.com/1.3.6/quill.min.js',

// src: '//cdn.quilljs.com/1.3.6/quill.core.js',

}

link: [

{ rel: 'stylesheet', href: '//cdn.quilljs.com/1.3.6/quill.snow.css' },

{ rel: 'stylesheet', href: '//cdn.quilljs.com/1.3.6/quill.bubble.css' },

// { rel: 'stylesheet', href: '//cdn.quilljs.com/1.3.6/quill.core.css' },

]

}

core.jsとcore.cssについて

CDNのcore.jsとcore.cssは
テーマのない縮小版らしく
記載不要なんだとか。

https://stackoverflow.com/questions/41539553/quill-themes-not-working

ということでコメントアウトしています。
coreを書いてしまうと

Error

quill Cannot import themes/snow. Are you sure it was registered?

デフォルトで表示させる

https://quilljs.com/docs/configuration/

まずはカスタムなどはほとんどせず
簡単な表示のみを行います。

コンテナは
いずれか1つということで
div id="editor"を使用

<template>
  <div class="page">
    <div id="editor" />
  </div>
</template>

<script>
setTimeout( () => {
  let editor = new Quill('#editor', {
    placeholder: 'Compose an epic...',
    theme: 'snow',
  })
}, 10)
</script>

<style lang="scss" scoped>
  .page {
    padding: 20px;

    > #editor {
      height: 100px;
    }
  }
</style>

</div>

</template>

setTimeout( () => {

let editor = new Quill('#editor', {

placeholder: 'Compose an epic...',

theme: 'snow',

})

}, 10)

</script>

.page {

padding: 20px;

> #editor {

height: 100px;

}

</style>

ここに至る経緯

参考になるか分かりませんが…
Nuxtで導入している記事が
あまりなかったので
載せておきます✍️

公式をコピペではエラー

<template>
 <div id="editor" />
</template>

</template>

var container = document.getElementById('editor');
var editor = new Quill(container);

var options = {
  debug: 'info',
  modules: {
    toolbar: '#toolbar'
  },
  placeholder: 'Compose an epic...',
  readOnly: true,
  theme: 'snow'
};
var editor = new Quill('#editor', options);

var container = document.getElementById('editor');

var editor = new Quill(container);

var options = {

debug: 'info',

modules: {

toolbar: '#toolbar'

placeholder: 'Compose an epic...',

readOnly: true,

theme: 'snow'

};

var editor = new Quill('#editor', options);

export default {
  plugins: [
    '~/plugins/quill.js',
  ],
  //
}

export default {

plugins: [

'~/plugins/quill.js',

}

エラー。。。

Error

quill Invalid Quill container

quill Invalid Quill container #editor

原因は…？

https://stackoverflow.com/questions/49274106/quill-error-quill-invalid-quill-container

ということでsetTimeout

setTimeout( () => {
  var container = document.getElementById('editor');
  var editor = new Quill(container);
}, 3000)

var options = {
  debug: 'info',
  modules: {
    toolbar: '#toolbar'
  },
  placeholder: 'Compose an epic...',
  readOnly: true,
  theme: 'snow'
};
var editor = new Quill('#editor', options);

setTimeout( () => {

var container = document.getElementById('editor');

var editor = new Quill(container);

}, 3000)

var options = {

debug: 'info',

modules: {

toolbar: '#toolbar'

placeholder: 'Compose an epic...',

readOnly: true,

theme: 'snow'

};

var editor = new Quill('#editor', options);

しかし

Error

logger.js:6 quill Invalid Quill container #editor

🤔💭

あれ、そもそもnew Quillを
2回やってますね💥

ということでプレイグランドを見てきました👀
最初にこれを見るべきでした😂

jsファイルだとidの認識ができず、
かといってnew Quillと
optionを切り離し方は分からず
結局ローカルのscriptで書きました。

まぁグローバルでやるほど
使う箇所は多くないので
あまり追求する必要性も
感じませんでした🐸

テキストの入力が
できなかったのですが、
オプションの
readOnly: true,
こちらが原因だったので
消しました🧹
https://quilljs.com/docs/configuration/#options

ツールバーのカスタム

選択した部分のみ
コード化する…
これがやりたかったものです🙌

ツールバーはモジュールの一部です💫☝️
モジュールを使用することで
動作・機能をカスタムしていきます✨🤖
https://quilljs.com/docs/modules/

toolbar

配列内に使用したい物を入れればOK🙆‍♀️

<script>
setTimeout( () => {
  let editor = new Quill('#editor', {
    modules: {
      toolbar: {
        container: [['bold', 'italic'], ['link', 'image', 'video', 'product', 'code']],
      }
    },
    placeholder: 'Compose an epic...',
    theme: 'snow',
  })
}, 100)
</script>

setTimeout( () => {

let editor = new Quill('#editor', {

modules: {

toolbar: {

container: [['bold', 'italic'], ['link', 'image', 'video', 'product', 'code']],

}

placeholder: 'Compose an epic...',

theme: 'snow',

})

}, 100)

</script>

syntax

highlight.jsが必要

toolbarのcodeではなく
こちらを使用する場合は
highlight.jsが必要です。

'syntax': true;
のみを記載した場合に
こんなエラーが出ます。

Error

Uncaught Error: Syntax module requires highlight.js. Please include the library on the page before Quill.

https://highlightjs.org/

⬇️CDN

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>

href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">

⬇️nuxt.config.js

export default {
  head: {
    script: [
      {
        src: '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js',
        src: '//cdn.quilljs.com/1.3.6/quill.js',
        src: '//cdn.quilljs.com/1.3.6/quill.min.js',
      }
    ],
    link: [
      { rel: 'stylesheet', href: '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css' },
      { rel: 'stylesheet', href: '//cdn.quilljs.com/1.3.6/quill.snow.css' },
      { rel: 'stylesheet', href: '//cdn.quilljs.com/1.3.6/quill.bubble.css' },
    ]
  },
  //
}

export default {

head: {

script: [

{

src: '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js',

src: '//cdn.quilljs.com/1.3.6/quill.js',

src: '//cdn.quilljs.com/1.3.6/quill.min.js',

}

link: [

{ rel: 'stylesheet', href: '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css' },

{ rel: 'stylesheet', href: '//cdn.quilljs.com/1.3.6/quill.snow.css' },

{ rel: 'stylesheet', href: '//cdn.quilljs.com/1.3.6/quill.bubble.css' },

]

}

Quillの前に読み込む必要があるので
1番上に記載しましたが
エラーになってしまいました😖

Error

Uncaught Error: Syntax module requires highlight.js. Please include the library on the page before Quill.

vue2-editorを使用してみる

Vue用にQuillをカスタマイズしたものです！
https://github.com/davidroyer/vue2-editor

最初からこちらを使っていた方が簡単でした😂笑

<template>
  <div class="page">
    <div id="app">
      <vue-editor v-model="content"></vue-editor>
    </div>
  </div>
</template>


<script>
import { VueEditor } from "vue2-editor"

export default {
  components: {
    VueEditor
  },
  data () {
    return {
      content: "<h1>Some initial content</h1>"
    }
  },
}
</script>

<vue-editor v-model="content"></vue-editor>

</div>

</template>

import { VueEditor } from "vue2-editor"

export default {

components: {

VueEditor

data () {

return {

content: "<h1>Some initial content</h1>"

}

</script>

まとめ

Quillとvue2-editorで
シンタックスの見た目が変わるので
好みで使い分けても良いかなと思います。

他のカスタムについては
もう少し試してみて
使い心地を検証します💫

そういえばLICEcapの代わりに
macに備わっている
録画機能を使うことにしました。
https://support.apple.com/ja-jp/HT208721

もしくはQuickTime Player⏰

ただこれだと
撮影枠を出してから
ウィンドウを動かしたりできないです。

あとWPにアップロードするには
拡張子をgifにする必要があります。
LICEcapならこれが1度にできました🤭

gifに変換できるアプリPicGIF Lite
https://apps.apple.com/jp/app/picgif-lite/id844918735?mt=12