Nuxt3環境下で、Vue3-editorつかってみよう ①導入編
Vue2-editorってすごいよね
すごかったんですよ。エディタのお手軽パッケージってかんじ。
でも、Vue2ってなんかもうすぐいなくなっちゃうじゃないですか、悲しい。
なので、現在、Vue3(というかNuxt3)環境におけるVue3-editorの可能性について考えています。
ベータ版って書いてあるんよなぁ
でも世界的にもしっかりインストールはされているようですし、まあ使ってみようかな、と。
ただ、あんまし記事がないので、一生懸命手探りで実装している感があります。
なんか間違ってたらおしえてください。
環境
- Mac M1 Venture13.1
- nuxt 3.4.1
- @vue/cli 5.0.8
- typescript@4.7.4
あとなにがいる？
参考リンク
こちらは公式
で、基本Vue2−editorと変わらんからドキュメントとかはこっち見てね！って書いてある
これがJSだしVue2だからOptionsAPIだし、TS訳＆CompositionAPI訳をしつつ実装をするので、へっぽこエンジニアは時間がかかっております。笑
手順
install
まずインストールします。つくるディレクトリ直下（なお、現在何もなし）まで飛んでインストールします。
公式の見解はこう
$ npm i vue3-editor
今回、pnpm入れてます。わたし、 pnpm芸人なのでこれで行ってみました。
$ pnpm add vue3-editor
するとインストールできちゃった。(スクショとりそこねたしまった)
インストール確認
"dependencies": {
"vue3-editor": "^0.1.1"
}
されとった
カンタンにコード書いてみて使ってみよう
ここ↑にありますが、なんか完成されてそうなコード↓↓を見かけたのでそのまま書いたろうと思って(笑)
<script lang="ts" setup>
import { VueEditor, Quill } from "vue3-editor";
import axios from "axios";
</script>
<template>
<client-only>
<vue-editor
id="editor"
useCustomImageHandler
@image-added="handleImageAdded"
v-model="htmlForEditor">
</vue-editor>
<nuxt-link to="/">もどる</nuxt-link>
</client-only>
</template>
いったんそのままいったりました。すると
npm i --save-dev @types/vue3-editorか、
declare module 'vue3-editor'書くかしろやと言われました
npm i --save-dev @types/vue3-editor の方
わたしpnpm芸人なので
$ pnpm add --save-dev @types/vue3-editor
でいったったわけですね、すると
とか言ってくるわけですよ、404エラー。ないんですね。ないもんを請求された模様です
ええ、pnpmだからいかんかなあ？とか思うわけですね、なのでおとなしく
$ npm i --save-dev @types/vue3-editor
もやってみるわけですよ。実証実験中だし。やれることはやろっかなって思って
待つこと9分46秒（実測）
はい、だめでした。結構待ったのに。
ちなみにこのエラーは別件（Firebase deployとか）で無限に世話になっていて、今も解決してないエラーです。
pnpmベースでたてたプロジェクトに、npmでなんかしようとするとだめなやつなんだな。という学びを得た。
declare module 'vue3-editorの方
まあちょっとへっぽこなので作ったことないなあと思って参考サイトを探す旅へ。
このへんを読み漁ってきて、作ってみました。
declare module "vue3-editor";
本当にこんだけか？と思ったけど赤い波線は無事消滅。ありがたや。
あとNuxtだからしなきゃいけないやつ
export default defineNuxtConfig({});
+ {
+ modules: ["vue3-editor/nuxt"];
+ }
これも書き足して、準備完了。
起動 pnpm dev
うふふ。かけちゃった。
まあ機能的にはVue2-editorと変わんないはずだから、そりゃそうである。
今日はここまで。今後の実験予定
① 画像やらなんやらの処理をcompositionAPI芸人する
上記のとおりなんだけど画像は入らなかったので、それを処理として書かなきゃなんだけど、前述のとおりドキュメントがoptionsAPIなのである
これこれ。
自分はcompositionAPI芸人なので、こいつを解読して処理として書かなきゃいけない。
ぐあーがんばろう！
② 再描画時にスタイルを保持させる
なんでそんなこと言うかっていうと、いつか記事に上げたいと思ってるけど
React18でここまでいい感じのエディタに出会えなかった
という過去を持っているからです。
試したエディタは5種類くらい、ここまで完成されたパッケージなくて、機能も一つ一つモジュールで追加しなきゃいかんし、一番使えたエディタ「Lexical」でも、
firestoreを経由するとスタイルをどっかに置いてきちゃう
んです。
ここいらへんを参考にしました。3ヶ月くらい前の話なので、Reactのほうでもなんかいいエディタ出てるかもしんない。
余談：個人的にすきなエディタはこれ
toast-UI っていうやつ、これUIかわいくて、エディタもかわいいほうがいいだろ！って思ったけど、ちょっと上手に使いこなせなかった。今ならいけるかも知れない、今度遊んでみようかな。
以上、報告でしたー。
Discussion