Добрый день. Под Nuxt 3 не так много нормальных визуальных редакторов с подгрузкой фото. Поэтому решил на эту тему написать целую статью. Итак..приступим
Для начала как всегда устанавливаем новый проект Nuxt 3.
npx nuxi init nuxt3-editor
cd nuxt3-editor
npm i
Далее ставим сам визуальный редактор
npm i @vueup/vue-quill
Далее ставим h3-formidable для обработки файлов из визуального редактора и сохранения файлов в папку с нашим проектом
npm i h3-formidable
В папке components делаем файл Editor.vue и вставляем такой код:
<script setup>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import ImageUploader from "quill-image-uploader";
import BlotFormatter from "quill-blot-formatter";
const content = ref("");
const modules = [
{
name: "imageUploader",
module: ImageUploader,
options: {
upload: (file) => {
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append("image", file);
console.log(file);
$fetch("/api/post/post", {
method: "POST",
body: formData,
}).then((res) => {
console.log(res);
resolve(`/uploads/${res}`);
});
// .catch((err) => {
// reject("Upload failed");
// console.error("Error:", err);
// });
});
},
},
},
{
name: "blotFormatter",
module: BlotFormatter,
options: {
/* options */
},
},
];
</script>
<template>
<div class="mx-8 mt-8">
<ClientOnly>
<QuillEditor
theme="snow"
v-model:content="content"
toolbar="full"
:modules="modules"
content-type="html"
/>
</ClientOnly>
</div>
</template>
На любой странице нашего приложения подключаем компонент Editor таким образом
<template>
<div>
<client-only><Editor /></client-only>
</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
Наш визуальный редактор подключен. Но не все так просто. При вставке картинок они никак не будут обрабатываться и никуда не будут сохраняться. Это нужно исправить.
В папке server создаем папку api. Далее в папке api делаем папку post и в ней файл post.post.js с содержимым:
import { readFiles } from "h3-formidable";
export default defineEventHandler(async(event) => {
try {
const { fields, files } = await readFiles(event, {
includeFields: true,
// other formidable options below
multiples: true,
uploadDir: "./public/uploads",
keepExtensions: true,
});
const body_files= files.image;
let imagesArray = [];
if (body_files && body_files.length > 0) {
body_files.forEach((img) => {
imagesArray.push({
path: img.newFilename,
mimetype: img.mimetype,
});
});
}
return imagesArray[0].path
} catch (err) {
console.log(err)
}
})
К этому файлу у нас обращается визуальный редактор при загрузке картинки. Картинка сохраняется в папке /public/uploads (не забывайте создать ее) и после каждого сохранения картинки ей присваивается новое уникальное имя, которое мы будем возвращать обратно на фронтенд строкой return imagesArray[0].path
После загрузки в компоненте Editor.vue у нас есть код
.then((res) => {
console.log(res);
resolve(`/uploads/${res}`);
});
Который и будет вставлять картинку уже с новым загруженным именем. Теперь можно сформировать все данные и отправить их в базу данных. Кому интересно как это сделать пишите в комменты, напишу следующей статьей.