在 Next.js 应用程序中的 React-Quill 中面临图像元素的对齐问题

Question

在与 Next.js 应用程序集成时，正在努力解决 React-quill 中的图像对齐问题。文本对齐效果很好，但图像对齐行为却出乎意料。我在 Quill 编辑器中使用以下代码片段：

const toolbarOptions = [
  [{ font: [] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],

  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [
    {
      align: [],
    },
  ],

  ["clean"], // remove formatting button
  ["link", "image"],
];

return(
 <ReactQuill
  theme="snow"
  id={id}
  value={value}
  readOnly={disabled}
  modules={{ toolbar: disabled ? false : toolbarOptions }}
  onChange={onChange}
  className={`bg-[white] rounded-lg text-black h-96`}
  {...rest}
 />
);

尽管文本对齐工作正常，但图像未按预期对齐。任何有关解决此图像对齐问题的见解或建议将不胜感激。谢谢你

我使用提供的

toolbarOptions

为 Quill 编辑器配置了图像对齐选项。文本对齐功能正常，但图像对齐行为不符合预期。我期望

align

选项能够相应地对齐图像，但它似乎对它们的对齐没有影响。

Answer 1

即使我遇到了这个问题。我找到了这个解决方案。我希望这会起作用。 https://stackoverflow.com/a/77175065/20122625