我如何改变tinymce的方向性答案

【问题标题】：How can i change directionality on tinymce我如何改变tinymce的方向性
【发布时间】：2021-12-06 23:38:46
【问题描述】：

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

【问题讨论】：

标签： reactjs tinymce textarea tinymce-4 tinymce-5

【解决方案1】：

首先，您需要将directionality 作为插件添加到编辑器：

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

然后用init的directionality属性，可以设置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 }"
        }}
      />
    </>
  );
}

【讨论】：

感谢您的回复！我认为我的问题不是 rtl。因为我做了完全一样的，但它仍然一样。在我输入一个字母后，焦点将位于第一个字母之前。所以当我写“stackoverflow”时，它就像“wolfrevokcats”一样，我认为它是因为 rtl，但我认为不是。那么我该如何解决呢？你知道为什么会这样吗？例如：prnt.sc/1wtsu7u
@NewinXamarin 你试过改变键盘语言吗？
不，但我的键盘已经是土耳其语了。所以我的语言是ltr。我认为这不是问题，但感谢您的回复！
@NewinXamarin 没关系！你的问题解决了吗？
是的，兄弟。最后我发现了我的问题。我猜它是一个错误。当我将 onChange 更改为 onBlur 时，它的效果很好。问题来自 onChange 事件。也许我做错了什么我还不确定，但我现在开始使用 onBlur 哈哈哈。