【Nuxt.js】WYSIWYGエディター: Quillを使ってみた
#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア #駆け出しエンジニア #駆け出しエンジニアと繋がりたい
🎈 この記事はWP専用です
https://wp.me/pc9NHC-14f
前置き
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や
ページコンポーネントに入れ込みます。
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' },
]
},
//
}##core.jsとcore.cssについて
CDNのcore.jsとcore.cssは
テーマのない縮小版らしく
記載不要なんだとか。
https://stackoverflow.com/questions/41539553/quill-themes-not-working
ということでコメントアウトしています。
coreを書いてしまうとエラーが出ます。
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>##ここに至る経緯
参考になるか分かりませんが…
Nuxtで導入している記事が
あまりなかったので
載せておきます✍️
###公式をコピペではエラー
<template>
<div id="editor" />
</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);export default {
plugins: [
'~/plugins/quill.js',
],
//
}エラー。。。
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);しかし
quill Invalid Quill container #editor
🤔💭
あれ、そもそもnew Quillを
2回やってますね💥
ということでプレイグランドを見てきました👀
最初にこれを見るべきでした😂
jsファイルだとidの認識ができず、
かといってnew Quillと
optionを切り離し方は分からず
結局ローカルのscriptで書きました。
まぁグローバルでやるほど
使う箇所は多くないので
あまり追求する必要性も
感じませんでした🐸
テキストの入力が
できなかったのですが、
オプションの
readOnly: true,
こちらが原因だったので
消しました🧹
https://quilljs.com/docs/configuration/#options
ツールバーのカスタム
🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-14f