開発ブログ

【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

⬇️nuxt.config.js

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


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"を使用


ここに至る経緯

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

公式をコピペではエラー

エラー。。。

Error

quill Invalid Quill container

quill Invalid Quill container #editor

原因は…?

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

ということでsetTimeout

しかし

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🙆‍♀️

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

⬇️nuxt.config.js

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

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


まとめ

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

-開発ブログ
-,

© 2021 aLiz Nuxt