Missing Line Spacing in Text Editor

4 posts, 0 answers
  1. Raul
    Raul avatar
    15 posts
    Member since:
    Apr 2016

    Posted 15 Sep Link to this post

    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.

     

     

  2. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 15 Sep Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Raul
    Raul avatar
    15 posts
    Member since:
    Apr 2016

    Posted 16 Sep Link to this post

    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.

  5. Rumen
    Admin
    Rumen avatar
    12848 posts

    Posted 20 Sep Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready