如何使用 CKEditor 设置图像更改

Question

我在 React 中使用 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%",
        },
      ],
      toolbar: ["resizeImage"],
    },
    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;

我在 React 中使用 CkEditor5。我正在添加图片，但无法更改图片的大小。我无法向左、向右或居中移动图像。一定是用来调整图片大小的工具栏

Answer 1

update your version or install again npm install @ckeditor/ckeditor5-image

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";

import Image from "@ckeditor/ckeditor5-image/src/image";
import ImageResize from "@ckeditor/ckeditor5-image/src/imageresize";
import ImageStyle from "@ckeditor/ckeditor5-image/src/imagestyle";
import ImageAlignment from "@ckeditor/ckeditor5-image/src/imagealignment";

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

  const editorConfiguration = {
    plugins: [
      ClassicEditor.builtinPlugins,
      Image,
      ImageResize,
      ImageStyle,
      ImageAlignment
    ],
    toolbar: {
      items: [
        "heading", "|",
        "bold", "italic", "link", "|",
        "bulletedList", "numberedList", "|",
        "imageUpload", "blockQuote", "insertTable", "mediaEmbed", "|",
        "undo", "redo"
      ]
    },
    image: {
      resizeOptions: [
        {
          name: "resizeImage:original",
          value: null,
          label: "Original",
        },
        {
          name: "resizeImage:40",
          value: "40",
          label: "40%",
        },
        {
          name: "resizeImage:60",
          value: "60",
          label: "60%",
        },
      ],
      toolbar: [
        "resizeImage",
        "|",
        "imageStyle:full",
        "imageStyle:side"
      ]
    },
    table: {
      contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"],
    },
    language: "tr",
    placeholder: ""
  };

  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;