TinyMCE设置directionality为ltr不生效，文本从右到左显示如何解决？

• 配置被父级属性/全局样式覆盖
  你设置的directionality: "ltr"会被Editor组件父元素的dir="rtl"属性、全局CSS中针对编辑器容器或body设置的direction: rtl规则覆盖，优先级高于编辑器内置配置。
  解决方法：给Editor组件外层包裹设置了dir="ltr"的div容器，同时排查全局样式中是否有强制设置全局排版方向的规则。
• 组件版本兼容性问题
  旧版本的React TinyMCE组件存在init配置中directionality不生效的已知bug，若你的组件版本低于5.6.0，升级到最新稳定版即可修复该问题。
• 编辑器内部内容样式未强制指定
  你当前的content_style配置没有显式指定编辑器内部内容的排版方向，部分场景下会继承默认的RTL规则，直接在content_style中新增direction: ltr即可强制生效。

修改后的参考代码 #

<div dir="ltr">
  <Editor
    onChange={EditorDataUpdate}
    apiKey="SOMEKEY"
    onInit={(evt, editor) => (editorRef.current = editor)}
    initialValue={editorData}
    init={{
      directionality: "ltr",
      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; direction: ltr;}",
    }}
  />
</div>

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