Customize order possible in Kendo Editior

[Ayyappan]

Is possible to add alphabetical order after number in index items in kendo editor. Here we used  Kendo UI v2015.2.902 and struggle regarding this. If its possible please share programming coding also.

For example :

1.a,

1.b,

1.c,

1.1.a

2.c

2.d

[Ayyappan]

For index items mean ordered list.

[Ivan Danchev]

Hello,

Such modification of the ordered lists in the Editor is not available out-of-the-box and would require a custom solution.

Consider using the  stylesheets option. It allows specifying a stylesheet with custom CSS rules, which will get applied to the content of the Editor:

$("#editor").kendoEditor({
	stylesheets: ["editorStyles.css"],
	tools: [
		"bold",
		"italic",
		"underline",
		"strikethrough",
		"fontName",
		"fontSize",
		"foreColor",
		"backColor",
		"insertUnorderedList",
		"insertOrderedList",
	]
});

In the editorStyles.css file you can use custom CSS rules that modify the default appearance of the li elements in an ol, for example:

ol {
	margin-bottom: 0;
	counter-reset: item;
}

ol li {
	display: block;
	position: relative;
}

ol li:before {
	content: counter(item) "." counter(item, lower-alpha);
	counter-increment: item;
	position: absolute;
	margin-right: 100%;
	right: 10px;
}

Regards,
Ivan Danchev
Progress Telerik

[Ayyappan]

Hi Ivan Danchev,

I added above one. Does not work properly. Actually we used angularjs. i share my code.

 

$scope.editorOptions = {

        tools: ['formatting', 'bold', 'italic', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight', 'insertUnorderedList',
            'insertOrderedList', 'indent', 'outdent', 'createLink', 'insertImage', 'subscript', 'superscript', 'createTable',
            'addRowAbove', 'addRowBelow', 'addColumnLeft', 'addColumnRight', 'deleteRow', 'deleteColumn', 'viewHtml',
             {
                 name: "crossreference",
                 toolCaption: "<i class='fa fa-hand-o-right'></i>",
                 template: $("#toolTemplate").html()
             },
            {
                name: "footnote",
                toolCaption: "<i class='fa fa-file-code-o'></i>",
                template: $("#toolTemplFootnote").html()
            },
             {
                 name: "deletefootnote",
                 toolCaption: "<i class='fa fa-file-excel-o'></i>",
                 template: $("#toolTemplDelFootnote").html()
             }
        ],

}

}

}

 

how to add css internally this code. can you help out of this.

[Ivan Danchev]

Hi Ayyappan,

The "stylesheets" option is not set in the code snippet you posted. Attached you can find a sample web site. In it an Editor is initialized in an AngularJs scenario. The tools configuration is added to the Editor options as well as the stylesheets option:

$scope.editorOptions = {
  stylesheets: ["editorStyles.css"],
  tools: ['formatting', 'bold', 'italic', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight', 'insertUnorderedList', 'insertOrderedList', 'indent', 'outdent', 'createLink', 'insertImage', 'subscript', 'superscript', 'createTable', 'addRowAbove', 'addRowBelow', 'addColumnLeft', 'addColumnRight', 'deleteRow', 'deleteColumn', 'viewHtml',
      {
        name: "crossreference",
        toolCaption: "<i class='fa fa-hand-o-right'></i>",
        template: $("#toolTemplate").html()
      },
      {
        name: "footnote",
        toolCaption: "<i class='fa fa-file-code-o'></i>",
        template: $("#toolTemplFootnote").html()
      },
      {
        name: "deletefootnote",
        toolCaption: "<i class='fa fa-file-excel-o'></i>",
        template: $("#toolTemplDelFootnote").html()
      }
     ],
}  

If you run the EditorTest.html page in the browser and create an ordered list in the Editor, you should see the list modified, as demonstrated in this screenshot.

The CSS that modifies the default appearance of the ol li elements is in the editorStyles.css file.

Regards,
Ivan Danchev
Progress Telerik

[Ayyappan]

Hi,

Above example not working for me. Is there any other possibilities. Please help me out of this.

[Ivan Danchev]

Hi Ayyappan,

Could you elaborate more on what is not working? What is the behavior at your end compared to the screenshot I posted in my previous reply?

Regards,
Ivan Danchev
Progress Telerik

[Ayyappan]

Hi Ivan,

Actually we need add ordered list like alpha numeric.

 

For example, For billeting, and ordered number(1,2,3) have a tool in content editor. Similarly is there any tool available alpha numeric ordered list(1.a,1.b,1.c,1.1.a,2.a)

 

[Ivan Danchev]

Hi Ayyappan,

The only available tool dedicated to inserting ordered lists is the "insertOrderedList" tool, which uses numbers: 1., 2., 3., etc. Consider implementing a custom tool (see this demo, which shows how a custom tool can be created), if you want to have another tool for inserting lists.

Regards,
Ivan Danchev
Progress Telerik