Quill Editor/Pabill Blot Formatter. Проблема с выравниванием изображений ⇐ Html

[Anonymous]

Я пытаюсь внедрить текстовый редактор в своем веб-приложении Next.js, я использовал текстовый редактор Quill, а также перо, для изменения изображения, изменение размера/выравнивание. Изменение размера работает нормально, но выравнивание влево, справа или центр не перемещают изображение, когда нажимает значок. Я не слишком уверен, почему, я посмотрел на консоль после того, как нажал, например, право на нажатие - чтобы увидеть, может ли мой файл CSS это каким -то образом - но на этом изображении не было CSS.

Код: Выделить всё

"use client";

import React, { useState, useRef, useEffect, useMemo } from "react";
import dynamic from "next/dynamic";
import { debounce } from "lodash";
import { Undo, Redo, Eye, X, Image as ImageIcon } from "lucide-react";
import "react-quill-new/dist/quill.snow.css";
import Quill from "quill";
import { toast } from "react-hot-toast";
import "./styles.css";
import BlotFormatter2 from "@enzedonline/quill-blot-formatter2";

const ReactQuill = dynamic(
async () => {
const { default: RQ } = await import("react-quill-new");
const Quill = await import("quill");
const ImageDrop = require("quill-image-drop-module").ImageDrop;
Quill.default.register("modules/blotFormatter2", BlotFormatter2);
Quill.default.register("modules/imageDrop", ImageDrop);
const CustomImage = (await import("./CustomImage")).default;
Quill.default.register(CustomImage, true);

return function ForwardRefQuill(props: any) {
return ;
};
},
{
ssr: false,
loading: () => (

Loading editor...

),
}
);
< /code>
Модули: < /p>
const modules = useMemo(
() => ({
toolbar: {
container: [
[{ header: [1, 2, 3, false] }],
["bold", "italic", "underline", "strike", "blockquote"],
[{ list: "ordered" }, { list: "bullet" }],
[{ color: [] }, { background: [] }],
[{ indent: "-1" }, { indent: "+1" }],
[{ align: [] }],
["link", "image"],
["clean"],
],
handlers: { image: imageHandler },
},
history: {
delay: 1000,
maxStack: 100,
userOnly: false,
},
imageDrop: true,
blotFormatter2: {
align: {
allowAligning: true,
alignments: ["left", "center", "right"],
},
resize: { allowResizing: true },
image: { allowAltTitleEdit: true, allowLinkEdit: false },
},
}),
[imageRadius]
);
< /code>
Reactquill: < /p>
 {
if (source === "user") debouncedUpdate(value);
}}
placeholder="Write something amazing..."
modules={modules}
formats={formats}
theme="snow"
className="rounded-lg shadow-sm"
/>

kustomimage.ts:

Код: Выделить всё

import Quill from 'quill';

interface EmbedConstructor {
new (): any;
create: (value: any) => HTMLElement;
value?: (node: HTMLElement) => any;
}

const QuillBlockEmbed = Quill.import('blots/block/embed') as unknown;
const BlockEmbed = QuillBlockEmbed as EmbedConstructor;

class CustomImage extends (BlockEmbed as any) {
static blotName = 'image';
static tagName = 'img';

static create(value: any) {
const node = (super.create as (value: any) => HTMLElement)(value);

if (typeof value === 'string') {
node.setAttribute('src', value);
} else {
Object.keys(value).forEach((key) => {
node.setAttribute(key, value[key]);
});
}

return node;
}

static value(node: HTMLElement) {
const attributes: Record = {};
const attrs = Array.from(node.attributes) as Attr[];

attrs.forEach((attr) =>  {
attributes[attr.name] = attr.value;
});

return attributes;
}
}

export default CustomImage;

styles.css:

Код: Выделить всё

/* Image alignment */
.ql-align-center img, img.ql-align-center {
display: block;
margin-left: auto;
margin-right: auto;
}

.ql-align-right img, img.ql-align-right {
display: block;
margin-left: auto;
margin-right: 0;
}

.ql-align-left img, img.ql-align-left {
display: block;
margin-left: 0;
margin-right: auto;
}

Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/797 ... e-aligning