React中CKEditor5图片尺寸调整与对齐工具栏配置方法

要解决CKEditor5添加图片后无法调整尺寸、设置对齐的问题，只需修改编辑器配置，启用对应的图片操作工具栏项即可。以下是修改后的完整组件代码：

// src/components/CkEditor5.js
import React, { useState } from "react";
import { Box, Card, CardHeader, FormHelperText } from "@mui/material";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/tr";
import CustomUploadAdapter from "../CustomUploadAdapter.js";
import { FormControl } from "@mui/material";
import HksInputLabel from "../../components/Select/HksInputLabel.jsx";

const CkEditor5 = ({ initialData, onChange, helperText, label }) => {
  const [editorData, setEditorData] = useState(initialData || "");

  const editorConfiguration = {
    extraPlugins: [MyCustomUploadAdapterPlugin],
    placeholder: "",
    language: "tr",
    image: {
      resizeOptions: [
        {
          name: "resizeImage:original",
          value: null,
          label: "Original",
        },
        {
          name: "resizeImage:40",
          value: "40",
          label: "40%",
        },
        {
          name: "resizeImage:60",
          value: "60",
          label: "60%",
        },
        {
          name: "resizeImage:80",
          value: "80",
          label: "80%",
        },
      ],
      toolbar: [
        "imageStyle:alignLeft",
        "imageStyle:alignCenter",
        "imageStyle:alignRight",
        "resizeImage",
        "imageTextAlternative"
      ],
      styles: [
        "alignLeft",
        "alignCenter",
        "alignRight"
      ]
    },
    table: {
      contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"],
    },
  };

  function MyCustomUploadAdapterPlugin(editor) {
    editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
      return new CustomUploadAdapter(loader);
    };
  }

  function handleSubmit(e) {
    e.preventDefault();
    console.log("HTML output:", editorData);
    // Post işlemi yapılacak
  }

  return (
    <form onSubmit={handleSubmit}>
      <FormControl className="ckFormControl">
        {label && (
          <HksInputLabel className="formControlLabel">{label} :</HksInputLabel>
        )}
        <CKEditor
          editor={ClassicEditor}
          config={editorConfiguration}
          data={editorData}
          onChange={(event, editor) => {
            const data = editor.getData();
            setEditorData(data);
            if (onChange) onChange(data);
          }}
        />
        {
          <FormHelperText style={{ color: "red", fontSize: "1rem" }}>
            {helperText}
          </FormHelperText>
        }
      </FormControl>
    </form>
  );
};

export default CkEditor5;

关键修改说明 #

• 扩展尺寸调整选项：在resizeOptions中新增80%的尺寸选项，可根据需求增减其他比例
• 配置图片工具栏：在image.toolbar中添加对齐命令（imageStyle:alignLeft/alignCenter/alignRight），同时保留resizeImage和添加imageTextAlternative（图片替代文本），选中图片时这些操作项会显示在工具栏上
• 启用对齐样式：通过image.styles明确指定允许的对齐样式，确保编辑器能正确识别并应用这些样式

内容的提问来源于stack exchange，提问作者ffsafak