setDefaultStyle It works very badly in Text-Align

[Saeeed-B]

@JiHong88 hi By default, the Text-Align is left to right, and in this case everything works fine. But I used the following method to make the Text-Align , right to left by default

editor.setDefaultStyle("font-family: Vazir; font-size: 18px;text-align:right;direction:rtl");

But in this case, the text inside the editor is displayed from right to left, but when I display the text on my page, the text is from left to right. It seems that this method did not work

When I looked more closely, I realized that this method gives the styles to the editor itself, not to the text inside it.

How can we give default values to tools such as Text-Align, font, font size, direction, etc.? And apply to all texts entered in the editor.

[Saeeed-B]

For more explanation : When we use the setDefaultStyle() method , In fact, this method gives styles to the whole editor . That is, only the main div of the editor.

In the photo below it is quite clear

editor.setDefaultStyle("font-family: Vazir; font-size: 18px;text-align:right;direction:rtl");

`

But I could not find a way to style the texts that are entered in the editor by default. And only the same are the tool buttons.

the important point is : When we style the editor using setDefaultStyle(), the text entered in the editor actually takes the same style, because they are the children of the editor div. But when I take the content of the editor and display it in the desired place, those styles no longer exist. Because, this content is no longer child editor div . And it is loaded with its own styles

[JiHong88]

Hi @Saeeed-B Are you looking for RTL mode? suneditor.create("", {rtl: true})

[Saeeed-B]

In fact, there should be a way to set the default value for each tool

[JiHong88]

And your contents div class should be set "sun-editor-editable se-rtl"

[Saeeed-B]

Hi @Saeeed-B Are you looking for RTL mode? suneditor.create("", {rtl: true})

I use the react component and set rtl as follows :

   this.rtl = true ;

  <SunEditor
                    ref={this.SunEditor}
                    rtl={this.rtl}
                    }} />

But nothing changed.

[Saeeed-B]

And your contents div class should be set "sun-editor-editable se-rtl"

On the other hand, apparently this class only changes the direction, not the text-align.

I added this class manually but only the direction changed

[Saeeed-B]

On the other hand, I'm looking for a method that sets the default values and also allows the user to change these values to tools, Not for example the directory is necessarily rtl and the user can not change

[JiHong88]

<SunEditor setOptions={{ rtl: true }} />

[Saeeed-B]

<SunEditor setOptions={{ rtl: true }} />

I did this, but the se-rtl class was not added. And then I manually added it next to the sun-editor-editable class and the result was just direction rtl

[Saeeed-B]

In fact, there should be a way to set the default value for each tool

This is exactly what I want

[JiHong88]

All style of the editor's contents are defined at this css Try redefining the class that file

[Saeeed-B]

This is absolutely true, we can change these classes, but when we take the content of the editor and display it in its place, these classes no longer exist! As a result, we must have a way of giving the class to each paragraph ,for example, Align right to left. , And at the same time the user can change this align

[Saeeed-B]

[JiHong88]

Confirmation result, suneditor-react has not yet been updated to the latest version. Can not using RTL mode.

[Saeeed-B]

Yes, that's right, @JiHong88 thank you very much

[JiHong88]

@Saeeed-B Try this package, not suneditor-react

[Saeeed-B]

You are absolutely right and you should use the original package, but it is much easier to use a React component . And we are afraid that using the original package will cause us many problems. Because raw JavaScript is used .

@JiHong88 If you provide us with examples of how to use this package in React, we are confident that we will use the same package.

[JiHong88]

Yeah, l will update the usage examples in "vue" and "react".

[Saeeed-B]

@JiHong88 Thank you again. Certainly your editor is the best for me, who has been looking for a good editor for years. And I'm waiting for these examples

[sdraper69]

Just to confirm if I am seeing the same issue, if you set the default style to text-align: center, you can then never get a piece of text in the editor to be left-aligned - is this the same issue or should I open a new one?