Missing Line Spacing in Text Editor

[Raul]

Dear Telerik developers,

I need to use line spacing in Kendo Editor but I don't see this functionality.

Could you please show me how can I use this capability like Microsoft Word?.

Thanks in advanced.

Raúl.

 

 

[Patrick | Technical Support Engineer, Senior]

Hi Raul,

Currently, the Kendo Editor does not have a line-height configuration.  However, you can create your own custom tools or use an external stylesheet to change the style.  

Here is a Kendo UI Dojo by Progress which illustrates one approach you can take to set the line spacing. 

I would also suggest adding your idea to the Feedback Portal where it can be shared and voted on.  

I hope this helps steer you in the right direction. 

Regards,
Patrick
Telerik by Progress

 

 

[Raul]

Hi Patrick,

Thank you so much for your soon reply....

I have implemented the solution provided by you to my project, but it is not supported completely.

I need to add some html code (line spacing) in the selected text because I need to save this html code into my database in order to retrieve it in a future for additional changes.

The functionality should be :

"When I select a piece of text in my body of the control and I select one of the available options in custom 'Line Spacing dropdownlist', the program should add html code and produce the hope effect only in the selected lines."

This is my current code :

@model SUAssessment.WebUI.Models.EmailTemplateViewModel

<div class="AdminUser" id="AdminUserdiv">
    <div class="form-inline, form-horizontal">
        <div class="form-group">
            <div class="col-md-2" style="padding-top:5px;padding-left:50px;font-size:inherit;">
                @Html.LabelFor(model => model.EmailTemplateType.Name)
            </div>
            <div class="col-md-offset-3" style="width: 70%";>
                @Html.EditorFor(model => model.EmailTemplateType.Name, "ProtectedString")
            </div>
        </div>
        
    </div>
    @*<br />*@
    <div style="padding-top:10px;padding-left:35px;font-size:inherit;">
        @Html.Label("Available Labels: [User DisplayName],  [DueDate],  [StartDate],  [Triggerer DisplayName],  [ProfileName]")
    </div>
    
    <div style="margin-left:35px;padding-top:10px;margin-right:35px;">
        @(Html.Kendo().EditorFor(model => model.EMailBody)
                      .Name("EMailBody")
                      .HtmlAttributes(new { style = "width:900px;height:450px;" })
                      .Tools(tools => tools
                        .Clear()
                        .CreateLink().Unlink()
                        .Bold().Italic().Underline().Strikethrough()
                        .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                        .ViewHtml()
                        .Formatting()
                        .CleanFormatting()
                        .Outdent().Indent()
                        .CustomTemplate(ct => 
                            ct.Template("<label for='templateTool' style='vertical-align:middle;'>Line spacing:</label> <select id='templateTool'><option value='120%'>Single</option><option value='180%'>1.5 lines</option><option value='240%'>Double</option></select>"))
                        .FontName()
                        .FontSize()
                      )
        )
    </div>    
    
</div>

<script>

        $(document).ready(function () {
            $("#templateTool").kendoDropDownList({
                change: function (e) {
                    $("#EMailBody").data("kendoEditor").body.style.lineHeight = e.sender.value();
                }
            });
        });

</script>

Attached a screenshot.

Grateful if you can help me.

Raúl.

[Rumen]

Hello,

There is a similar demo for RadEditor for ASP.NET AJAX: Line Spacing Dropdown.

You can port it with a similar code - http://dojo.telerik.com/oFIPU/6:

$("#templateTool").kendoDropDownList({
    change: function(e) {
        var editor =  $("#editor").data("kendoEditor");
        var cArea = editor.body;
        var range = editor.getRange();
        var lineSpaceValue = e.sender.value();

      if (range.startContainer && range.startContainer.parentElement.tagName == "P")
      {
          range.startContainer.parentElement.style.lineHeight = lineSpaceValue;
      }
      else
      {
          cArea.style.lineHeight = lineSpaceValue;
      }
    }
});

This is just a basic demo, but not a complete solution. It is up to the developer working with the control to implement this scenario, not offered built-in by the component. You can find more information about Ranges here.

Best regards,
Rumen
Telerik by Progress