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

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

20 Answers 655 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 14 Jan 2013, 11:11 PM
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.

20 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 15 Jan 2013, 09:03 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrew
Top achievements
Rank 1
answered on 15 Jan 2013, 11:43 PM
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...
0
Dimo
Telerik team
answered on 16 Jan 2013, 01:24 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
priyanka
Top achievements
Rank 1
answered on 16 May 2017, 12:03 PM

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

0
Misho
Telerik team
answered on 17 May 2017, 08:08 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Garth
Top achievements
Rank 1
answered on 17 May 2017, 06:24 PM

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

0
Misho
Telerik team
answered on 18 May 2017, 08:02 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Garth
Top achievements
Rank 1
answered on 31 May 2017, 02:44 PM

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

0
Misho
Telerik team
answered on 02 Jun 2017, 07:14 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Garth
Top achievements
Rank 1
answered on 02 Jun 2017, 11:43 AM

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,

0
Garth
Top achievements
Rank 1
answered on 02 Jun 2017, 11:58 AM

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

0
Misho
Telerik team
answered on 06 Jun 2017, 07:13 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Garth
Top achievements
Rank 1
answered on 06 Jun 2017, 11:47 AM
So there is no work-around for this?
0
Misho
Telerik team
answered on 06 Jun 2017, 01:17 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
John A
Top achievements
Rank 1
answered on 13 Mar 2019, 09:16 PM

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

0
Misho
Telerik team
answered on 15 Mar 2019, 02:04 PM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
John A
Top achievements
Rank 1
answered on 18 Mar 2019, 12:10 AM

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

 

 

0
Misho
Telerik team
answered on 19 Mar 2019, 01:01 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
John A
Top achievements
Rank 1
answered on 20 Mar 2019, 12:41 AM

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

0
Misho
Telerik team
answered on 21 Mar 2019, 12:01 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Editor
Asked by
Andrew
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Andrew
Top achievements
Rank 1
priyanka
Top achievements
Rank 1
Misho
Telerik team
Garth
Top achievements
Rank 1
John A
Top achievements
Rank 1
Share this question
or