This is a migrated thread and some comments may be shown as answers.

Missing Line Spacing in Text Editor

3 Answers 201 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Raul
Top achievements
Rank 1
Raul asked on 15 Sep 2016, 02:00 PM

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.

 

 

3 Answers, 1 is accepted

Sort by
0
Patrick | Senior Technical Support Engineer
Telerik team
answered on 15 Sep 2016, 06:19 PM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Raul
Top achievements
Rank 1
answered on 16 Sep 2016, 09:11 AM

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.

0
Rumen
Telerik team
answered on 20 Sep 2016, 08:53 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Editor
Asked by
Raul
Top achievements
Rank 1
Answers by
Patrick | Senior Technical Support Engineer
Telerik team
Raul
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or