LoginSignup
Shi-ka
@Shi-ka

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Laravel ver.9 NPMでインストールしたQuilleditorを使用できるようにしたい

【環境】
Laravel Framework 9.39.0
quill@2.0.0

【やりたいこと】
一般的なブログ投稿画面上にNPMでインストールしたQuilleditorを使用できるようにしたい
※quill-image-resizeも使用できるようにしたいですが、ひとまずはQuilleditorを使用できるようになってから自分で試してみます。

Laravelを独学で勉強している初学者です。

下記Quillの導入ドキュメントや他の方が記載されている記事などを見ましたが、勉強不足なのと理解力が乏しいため、色々試してみましたがどのようにすれば使用できるようになるか分かりません。
https://quilljs.com/docs/installation
https://readouble.com/laravel/9.x/ja/vite.html

package.json
image.png

【試したこと】
①下記コマンドを実行
npm install quill@2.0.0

②resources/js/app.jsへ下記を追加
import Quill from 'quill' ;
import 'quill-image-resize';
import "quill/dist/quill.core.css";

const quill = new Quill('#editor');

③quillを使用したいbladeへ下記を追加

④npm run devを実行

cdnでは実装できていますが、npmで実装したい為、ご質問させていただきました。
ご助力いただける方がいらっしゃいましたら、とても助かります。

0

1Answer

エラーも何も出てないなら正しく動作はしている。ただしquill.core.cssがツールバーも何もないシンプルな見た目なので見えてないだけ。ブラウザ上で触ってみれば文字入力ができるはず。
bubbleと同じ。
https://quilljs.com/docs/customization/themes

テーマにsnowを指定すれば本当に使いたいのはこれだろうってものが表示される。

// resources/js/app.js

import Quill from 'quill';
import 'quill/dist/quill.snow.css';

try {
    const quill = new Quill('#editor', {
        theme: 'snow',
    });
} catch (e) {}

resources/js/app.jsに書いて#editorがないページでもエラーにならないようにtry-catch。
長くなるので書かないけど#editorがあるページだけでJSを読み込む方式でもいい。

新しい何かをインストールしたら最初はdevよりnpm run build
まず普通にビルドがエラーなく成功することを確認。

1

Comments

  1. @Shi-ka

    Questioner

    ご回答くださり、ありがとうございます。
    pop-culture-studio様の回答のおかげで、app.jsの記載に特に問題が無いことが分かり、デバッグでConsoleからapp.jsの宣言に問題があったことが分かりました。
    ※app.jsの記載が合っているか分からなかった為、Quillの導入のどこかに問題があると思い込んでしまっておりました。(宣言も導入の一部ですが)

    Laravel ver.9を使用しているので@viteで宣言しないといけないところを、下記のように宣言していたことが原因でした。
    【誤】image.png

    【正】image.png

    ずっと悩んでいたので、解決できてとても嬉しいです。
    ありがとうございました。

Your answer might help someone💌