set line spacing

[hkourd]

Hello

There is no item in the "Rich Text Editor" to adjust the line spacing. Can this item be added?

[Buvana Sathasivam]

Hi hkourd, 

Greetings from Syncfusion support. 

You should be able to achieve your requirement by using custom toolbar items with a created event. Please find the below code and sample for your reference. 

Index.cshtml 

<ejs-richtexteditor id="default" created="created"> 

            <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings> 

….. 

        </ejs-richtexteditor> 

 

<script type="text/javascript"> 

    var rteObj, selection, ranges, dialogObj, editorManager; 

    function created() { 

        rteObj = this; 

        editorManager = rteObj.formatter.editorManager; 

        var btnObj = new ej.splitbuttons.DropDownButton({ items: items, iconCss: 'e-icons e-btn-icons e-line-height', select: select }); 

        btnObj.appendTo('#lineheight_tbar'); // Created drop down button 

    } 

    function select(args) {  // Triggered when you select the dropdown buttons 

        if (rteObj.formatter.getUndoRedoStack().length === 0) { 

            rteObj.formatter.saveData(); 

        } 

        let nodes = editorManager.domNode.blockNodes(); 

        for (let i = 0; nodes.length > i; i++) { 

            (nodes[i]).style.lineHeight = args.item.text; // Set the line height 

        } 

        rteObj.formatter.saveData(); 

        rteObj.formatter.enableUndo(rteObj); 

    } 

</script> 

<style> 

    .e-dropdown-btn .e-btn-icon.e-icons.e-btn-icons.e-line-height::before { 

        content: "\eb37"; 

    } 

</style> 

 

HomeController.cs 

public IActionResult Index() 

        { 

            var tools = new 

            { 

                tooltipText = "Line Height", 

                template = "<button class='e-tbar-btn e-btn' tabindex='-1' id='lineheight_tbar' style='width:100%'></button>" 

            }; 

            ViewBag.items = new object[] { tools, "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", 

        "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", "SourceCode", "|", "Undo", "Redo" 

            }; 

            return View(); 

        } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE-line-height638877287  

Please let us know if you have any other concerns. 

Regards, 

Buvana S 

 

 

 

 

 

 

 

 

 

 

 

[hkourd]

thank you

The example you attached works well, but it does not work when I enter the same code into my project.

Could the used version cause problems in working?

Attachment: sssss_97309d40.rar

[Buvana Sathasivam]

Hi hkourd, 

No, it is not related to versions that cause a problem based on your shared screenshot. We suspect that you are facing theme-related issues. We have created a simple sample with dropdown buttons using the material theme. Can you please check the below sample? 

In the below code, we create a custom button inside the Rich Text Editor toolbar. 

HomeController.cs 

public IActionResult Index() 

        { 

            var tools = new 

            { 

                tooltipText = "Line Height", 

                template = "<button class='e-tbar-btn e-btn' tabindex='-1' id='lineheight_tbar' style='width:100%'></button>" // Create custom template button 

            }; 

            ViewBag.items = new object[] { tools, "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", 

        "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", "SourceCode", "|", "Undo", "Redo" 

            }; // You can define the custom button into Toolbar items. 

            return View(); 

        } 

 

We have converted a toolbar custom button to a dropdown button in the below way using Rich Text Editor's created event. 

Index.cshtml 

<e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings> 

….. 

function created() { 

var btnObj = new ej.splitbuttons.DropDownButton({ items: items, iconCss: 'e-icons e-btn-icons e-line-height' }); 

btnObj.appendTo('#lineheight_tbar'); 

 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CORE(2~11550958997 

Screenshot:  

 

 Could you please share the below information with us to replicate your issue on our end? 

• Share your Rich Text Editor related codes and nuget package versions.
• Have you faced any console errors?
• Share your Syncfusion theme name.

Regards, 

Buvana S 

[hkourd]

Excellent

The problem was solved and it worked.

Thank you very much 

[hkourd]

The problem now is that

When I select several lines to change the distance between the lines, but the distance between all the lines changes

I want to change only the selected lines, not all lines of text

[Buvana Sathasivam]

Hi hkourd, 

As per behavior, line height applies only to block nodes. You are not able to set the line height on selected lines. Please find the below links for your reference. 

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height 

Regards, 

Buvana S 

[hkourd]

ok

Thank you

[Buvana Sathasivam]

Hi Hkourd, 

Most welcome. Please get back to us if you need any further assistance. 

Regards, 

Buvana S