我怎样才能改变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 }"
}}
/>
</>
);
}
我在我的项目中使用了 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 }"
}}
/>
</>
);
}