Extend insert ordered list tool to style list with letters instead of numbers

[Andrew]

How would we go about duplicating the insert ordered list tool and then extending it to add style="list-style-type:lower-alpha" to the ordered list element?

We know how to add a custom tool and use jQuery to add the style, however we are not sure of what Kendo UI framework code to use to mimic the behaviour of the default insert ordered list tool and get a handle on the inserted ordered list element.

[Dimo]

Hello Andrew,

You can inject a stylesheet in the Editor's content area and add the desired list style there.

http://demos.kendoui.com/web/editor/styles.html

Greetings,
Dimo
the Telerik team

[Andrew]

Hi Dimo,

A drop down would have worked well rather than duplicating the insertOrderedList tool, however I need the style applied to the <ol> element whereas applying styles like you suggested seems to wrap the text of each list item in a span and then applies the style to the span, like this:

<ol>

<li><span class="alpha-ordered-list">Item 1</span></li>

<li><span class="alpha-ordered-list">Item 2</span></li>

<li><span class="alpha-ordered-list">Item 3</span></li>

</ol>

However I need this:

<ol class="alpha-ordered-list">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>

Or add the style directly like this:

<ol style="list-style-type:lower-alpha;">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>

I suspect this still requires a custom tool...

[Dimo]

Hi Andrew,

You can apply custom styling to elements inside the Editor content area without the need to use a Style tool.

$("#editor").kendoEditor({
    stylesheets: [
        "............../editorStyles.css"
    ]
});

If you add the following CSS rule to the Editor stylesheet ...

ol
{
    list-style: lower-alpha;
}

... all ordered lists will apply this style.

In case you want only some lists to have this style, then you will need a custom tool. Currently it is easier to create a custom button tool, which only modifies the list-style-type of existing (selected) lists using ranges, rather than inserting a new list.

http://docs.kendoui.com/api/web/editor#methods

For a better understanding how DOM ranges and DOM selections work, you can refer to MDN.

https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference

Regards,
Dimo
the Telerik team

[priyanka]

Hi Telerik Team,

 

Can you please provide me any example - how can I have different kind of ordered list in my editor -letters as well as numbers kind of list in my editor ??

I tried many many things but unable to achieve it , any hint or lead would work for me but please reply me asap.

Thanks,

Priyanka Bhatia

[Misho]

Hi,

Here is a sample that is showing the approach of using the DOM ranges.
Please note that this is not a complete solution but rather a very basic example that can be used as a reference for implementing your custom logic. 
Here is also a video showing the result of the test: 
https://www.screencast.com/t/lmF8ACKfl

Regards,
Misho
Telerik by Progress

[Garth]

Misho:

Is there no simple way to extend the same method that creates the regular OL but simply assign a different class to the list?  I too have the same kind of requirement but don't want to have to re-invent the wheel for all the conditions when creating the list.

Garth

[Misho]

Hi,

Here is an example that shows how to apply custom class to the ordered list:
http://dojo.telerik.com/@parvanov/UjuLU

Best Regards,
Misho
Telerik by Progress

[Garth]

Thanks that helped!  On another note, we are currently using an older version (2014.1.318) and have noticed that when using the "start" attribute on an OL that the editor is stripping out the attribute.

 

Is this a bug or a configuration issue?

 

Thanks

[Misho]

Hi,

Could you please isolate the issue in a Dojo sample and provide us with detailed reproduction steps so we could be able to replicate the problematic behavior?

Thank you in advance.

Best Regards,
Misho
Progress Telerik

[Garth]

Not sure if this worked properly or not, but here is what I created: http://dojo.telerik.com/@gamartin/Iqoki

Since it is hard to simulate the postback in dojo (or I don't know how), that is where the problem seems to lie.  The start attributes are removed somewhere along the way from the editor control to the back end.

 

thanks,

[Garth]

Misho:

I cannot recreate this behaviour under 2017.2.504, but in 2014.1.318 even when you select view Html, you can see that the start attribute has been stripped. 

 

Cheers

[Misho]

Hi,

I can confirm there is an issue with the start attribute being stripped from ordered lists in Kendo version 2014.1.318. I would recommend you to upgrade to the latest Kendo version where the problematic behavior is already not observed.

Best Regards,
Misho
Progress Telerik

[Garth]

So there is no work-around for this?

[Misho]

Hi,

I am afraid that we cannot provide a workaround, as the issue is wrapped in the HTML serialization code. However the problem is resolved in 2015.Q3.SP1 so upgrading to a newer version should help.

Best Regards,
Misho
Progress Telerik

[John A]

Hi,

After implemented this, whenever I selected the custom tool and apply it to any text, the default insert ordered list will be highlighted, instead of the new icon I have added. I think when I have editor.exec("insertorderedlist"); that forces the ordered list be highlighted instead of the new one I have added. Any fix for this issue?

Thank you

[Misho]

Hello,

The provided information was not enough to be able to replicate the problem on our side and identify the root cause for the problem. Since this thread is a few years old and quite long to track, I encourage you to isolate your custom implementation of Kendo editor in a dojo or sample example so the issue could be observable and open a new support ticket.
In this way will be enabled to replicate, debug it on our side and do our best to provide you with more reliable details and solution.

Best Regards,
Misho
Progress Telerik

[John A]

Thanks for your reply. 

I tried to create dojo but couldn't.

I just copied the details here if you run it anywhere:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.2.624/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.2.624/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
    <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
            &lt;p&gt;
                line 1
            &lt;/p&gt;
            &lt;p&gt;
                line 2
            &lt;/p&gt;
    </textarea>

    <script type="text/x-kendo-template" id="backgroundColor-template">
        <label for='templateTool' style='vertical-align:middle;'>Background:</label>
        <select id='templateTool' style='width:90px'><option value=''>none</option><option value='\#ff9'>yellow</option><option value='\#dfd'>green</option></select>
    </script>

    <script>
        $("#editor").kendoEditor({
            tools: [
                "insertUnorderedList",
                "insertOrderedList",
                {
                    name: "custom",
                    tooltip: "Insert custom list",
                    exec: function(e) {
                      var editor = $(this).data("kendoEditor");
                      editor.exec("insertorderedlist");
                      var list = kendo.ui.editor.Dom.closestEditableOfType(editor.getRange().startContainer, ["ol"]);
                      if (list) {
                      list.setAttribute("style", "list-style: lower-alpha");
                      }
                    }
                }
            ],
            stylesheets: [
        "./editorStyles.css"
    ]
        });
    </script>

</div>


</body>
</html>

 

What happens is when I select the new tool, although the orderlist is correct, but the default icon is always selected. You can test it by running the code above. I have added an image of what happens.

Thank you

 

 

[Misho]

Hi,

The observed behavior of the default insertOrderedList tool got colored when the editor.exec("insertorderedlist") command is executed is by design and it is expected. This could be observed in the following example by pressing the button below the editor content: https://dojo.telerik.com/IjageyAd

All the customization which are not implemented out of the box to the custom tools including the styling of the tools upon certain conditions are expected to be done by the developers in accordance with their personal custom use cases. I've modified the following sample with example customization to the myCustomTool that you could use as a reference to build your custom implementation:

https://dojo.telerik.com/IjageyAd

You could observe that the custom tool is changing  its background upon certain conditions in its handler:

{
                      name: "myCustomTool",
                      tooltip: "Insert custom list",
                      exec: function(e) {
                        var editor = $(this).data("kendoEditor");
                        editor.exec("insertorderedlist");
                        var list = kendo.ui.editor.Dom.closestEditableOfType(editor.getRange().startContainer, ["ol"]);
                        if (list) {
                        list.setAttribute("style", "list-style: lower-alpha");
                        console.log("Make your custom styling here");
                        $(".k-i-my-custom-tool").parent().css('background-color', '#f35800');
                        }
                        else {
                          $(".k-i-my-custom-tool").parent().css('background-color', '#EFEDED');
                        }
                      }
                  }

Please note that this is only a sample that showcases a basic example in the exec function of the custom tool.

I hope this helps.

Best Regards,
Misho
Progress Telerik

[John A]

Thanks Misho.

A question around the example you provided: 

right now when you applied the style, the tool is highlighted. However, if you click somewhere else and try to type some other stuff and then click on the ordered text, the tool won't be selected. My question is how can I check if the text I click or select is ordered so I can highlight the icon (ei., how to remember which part of text has customized orderedlist in order to highlight the icon).

 

Thank you

[Misho]

Hello,

You could attach to Kendo editor Change event and try to make your customization for the tool appearance similar to this sample: 
https://dojo.telerik.com/eDUKilEW

Best Regards,
Misho
Progress Telerik