CODEWITHSUNDEEP
javascriptreactjstinymce
ammar
ammar

Reputation: 33

TinyMCE - text direction changes automatically to Right-to-left in React Js

I am using TinyMCE in React js. But I am facing the problem when I Type Some Text text direction is RTL. I want it to change LTR.

Here is the Code:

<Editor
                          onChange={this.handleEditorChange}
                          value={this.state.description}  
                          onInit={(evt, editor) =>
                            (this.editorRef.current = editor)
                          }
                          initialValue={this.state.description}
                          init={{
                            directionality: "ltr",
                            height: 500,
                            menubar: true,
                            plugins: [
                              "advlist autolink lists link image charmap print preview anchor",
                              "searchreplace visualblocks code fullscreen",
                              "insertdatetime media table paste code help wordcount",
                            ],
                            toolbar:
                              "undo redo | formatselect | " +
                              "bold italic backcolor | alignleft aligncenter " +
                              "alignright alignjustify | bullist numlist outdent indent | " +
                              "removeformat | image | | help",
                            content_style:
                              "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
                          }}
                        />

Upvotes: 2

Views: 999

Answers (2)

Arman
Arman

Reputation: 811

Change:

initialValue={this.state.description}

to

value={this.state.description}

Upvotes: 3

ashish pixels
ashish pixels

Reputation: 81

Answer given by @Armaan is actually correct. Found detailed solution here: https://stackoverflow.com/a/67686888/13198347

Copying the answer as-is below:

The below answer worked for me as well, went to project github but did not find any bug, so submitted one now, https://github.com/tinymce/tinymce-react/issues/267

Here is the actual answer from TinyMCE as to how to fix this issue:

Change this line:

initialValue={blogContent}

to

value={blogContent}

The initialValue prop should only be set once. It resets the editor including the cursor position when it changes.

Upvotes: 3

Related Questions