how do you set the first line indent size?

[CharlesG]

My editors would like the default indent, or tab size, to be about 8 characters. It seems the default is 2 characters?

Document Editor seems to have:

documentEditor.Selection.ParagraphFormat.SetFirstLineIndent(24);

(I assume 24 is pixels?)

How can I do something similar with the Rich Text Editor?

The toolbar indent doesn't indent; it adds a margin to the entire paragraph!

Thanks.

[Vinitha Jeyakumar]

Hi Charles,

Your requirement to add indent for the first line of the Rich Text Editor's content can be done by adding the below CSS code.

Code snippet:

.e-richtexteditor .e-rte-content .e-content p:last-child,

      .e-richtexteditor .e-rte-content .e-content pre:last-child,

      .e-richtexteditor .e-rte-content .e-content blockquote:last-child,

      .e-richtexteditor .e-source-content .e-content p:last-child,

      .e-richtexteditor .e-source-content .e-content pre:last-child,

      .e-richtexteditor .e-source-content .e-content blockquote:last-child {

        text-indent: 20px;

      }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_Server1761726809

Regards,

Vinitha

[CharlesG]

Hi, thanks for your prompt response.

So far I have not been able to get this to work by adding the <style> to the bottom of my razor form, or by adding it a separate referenced css file.

I was able to get minimal functionality by using a different css class name with text-indent, and referencing it by using CssClass on the control. 

I don't yet understand why I don't seem to be able to reference e-richtexteditor when everything I see so far, including the browser dev console, says I should.

[Revanth Krishnan]

Hi Charles,

We have validated your queries,

Query 1: “I have not been able to get this to work by adding the <style> to the bottom of my razor form, or by adding it to a separate referenced CSS file, and I don't yet understand why I don't seem to be able to reference `e-richtexteditor` when everything I see so far, including the browser dev console, says I should.”

We are not able to reproduce this issue on our end, can you please share us with the following details,

• The Syncfusion NuGet version in which your application is running and the .NET version.
• The code part of both the Rich Text Editor and the styles you have used.
• If possible, please share us the issue reproducing sample or please modify the already shared sample with the issue reproducing steps.

The above details will be helpful for us to validate the reported issue from our end and assist you at the earliest.

Query 2: “I was able to get minimal functionality by using a different CSS class name with text-indent and referencing it by using CssClass on the control.”

We are glad that you found this solution. We have also prepared a sample to add text indent to the first line using the class configured in the `CssClass` API,

Code Snippet:

<SfRichTextEditor CssClass="e-custom-class">

    <RichTextEditorToolbarSettings Items="@Tools" />

    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>

</SfRichTextEditor>

 

<style>

      .e-custom-class .e-rte-content .e-content p:first-child,

      .e-custom-class .e-rte-content .e-content pre:first-child,

      .e-custom-class .e-rte-content .e-content blockquote:first-child,

      .e-custom-class .e-source-content .e-content p:first-child,

      .e-custom-class .e-source-content .e-content pre:first-child,

      .e-custom-class .e-source-content .e-content blockquote:first-child {

        text-indent: 20px;

      }

</style>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_Server1729093470

Please check the above code snippet and the sample and let us know if it satisfies your requirement to the fullest.

Regards,

Revanth

[CharlesG]

Thanks. This still doesn't work for me. I'm not able to provide a sample program demonstrating my challenges. This is a very large app with this piece just being one small part. It's probably something elsewhere in the project that is causing the conflict.

Regardless, with my testing where this does work:

.indentPlease
{
    text-indent: 40px !important;
}

I found this doesn't properly address the underlying issue.

We have thousands of existing html documents that could be well over a decade old. Some are newer. The format is not the same among them.

Therefore controlling the text-indent causes undesired formatting issues on some documents.

What I really require is a way to adjust how much the tab-key indents. Right now we have to press it about 4 times to get to the desired indent. Which, if that's what we have to do, that's what we have to do.

Thanks again for your help. I really appreciate it!

Charles

[Vinitha Jeyakumar]

Hi Charles,

We want to let you know that, when you press tab key inside the Rich Text Editor, the focus will automatically move to the next DOM element.

Can you please explain your exact requirement with Rich Text Editor for further validation at our end. Also share the below details,

• Do you want to apply indents when you press tab key inside RTE?
• Please share the RTE component rendering code snippet.
• Share the added styles code snippet in your razor page.

Regards,

Vinitha

[CharlesG]

That is the default behavior, yes.  However:

EnableTabKey="true"

Changes that behavior to the desired indent behavior.

[Vinitha Jeyakumar]

Hi Charles,

Yes, when we set true to the EnableTabKey, it will change the default behavior. But we cannot make changes to the indent size while pressing tab key other than achieving it through CSS level customization by setting text-indent.

So can you please replicate the issue you are facing while customizing styles in your project with the shared sample in our last update or please provide us with the simple issue reproducing sample to check the issue on our end. Also share the entire code snippet.

Regards,

Vinitha