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

Question

我在我的项目中使用了 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;}",
              }}
            />

Answer 1

首先，您需要将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 }"
        }}
      />
    </>
  );
}

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

How can i change directionality on tinymce

reactjs

tinymce

textarea

tinymce-4

tinymce-5