我怎样才能改变tinymce的方向性

How can i change directionality on tinymce

我在我的项目中使用了 tinymce,但我不知道为什么我的文本区域反向工作。方向性从右到左。但我想从左到右使用。我添加了方向性:“ltr”,但它不起作用。我能做什么 ?我的错误在哪里?感谢帮助!我的代码:

<Editor
              onChange={EditorDataUpdate}
              apiKey="SOMEKEY"
              onInit={(evt, editor) => (editorRef.current = editor)}
              initialValue={editorData}
              init={{
                directionality: "ltr", //Still working like rtl
                menubar: false,
                plugins: [
                  "advlist  autolink autosave link image lists charmap print preview hr anchor pagebreak",
                  "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                  "table contextmenu textcolor paste fullpage textcolor",
                ],
                toolbar:
                  "undo redo | formatselect | " +
                  "bold italic backcolor | alignleft aligncenter " +
                  "alignright alignjustify | bullist numlist outdent indent | " +
                  "removeformat | help",
                content_style:
                  "body { font-family:Helvetica,Arial,sans-serif; font-size:14px ;min-height:200px;}",
              }}
            />

首先,您需要将directionality作为插件添加到编辑器中:

 init={{
        plugins: ["directionality"],
      }}

然后用directionality属性 of init,可以设置默认值direction:

 init={{
        plugins: ["directionality"],
        directionality: "ltr",
      }}

您也可以将 directionality 插件添加到工具栏,与此相同:

init={{
        plugins: ["directionality"],
        directionality: "ltr",
        toolbar: "rtl ltr" 
     }}

最后,这是完整的示例:

import { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";

export default function App() {
  const editorRef = useRef(null);
  return (
    <>
      <Editor
        onInit={(evt, editor) => (editorRef.current = editor)}
        initialValue={"<p>This is the initial content of the editor.</p>"}
        init={{
          height: 500,
          menubar: false,
          directionality: "ltr",
          plugins: [
            "directionality advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table paste code help wordcount"
          ],
          toolbar:
            "rtl ltr | undo redo | formatselect | " +
            "bold italic backcolor | alignleft aligncenter " +
            "alignright alignjustify | bullist numlist outdent indent | " +
            "removeformat | help",
          content_style:
            "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"
        }}
      />
    </>
  );
}