How to apply text style on bullets/number list in CKEditor

Author - Mahesh Kumar
31.01.2019
|
0 Comments
||

How to apply text style on bullets/number list in CKEditor

CKEditor is a rich text editor used for writing content in online applications. It has features found in desktop word processors such as styles formatting (bold, italic, underline, bulleted and numbered lists), tables, block quoting, web resource linking, safe undo function, image inserting, paste from Word and other common HTML formatting tools.

Its default bullet and numbered list style doesn’t change according to the text.
apply text style on bullets/number list in CKEditor

Fig 1: Unordered list in ckeditor

apply text style on bullets/number list in CKEditor
Fig 2: Ordered list in ckeditor

In the screenshots we can see that only the text style changes but not the style of bullets or numbered list.

The list is created using the following tags:-

<ul> for unordered list
<ol> for ordered list

<li> list items which is included in both.

Eg-1 (ordered list):-
<ol>
<li> Blog 1 </li>
<li> Blog 2 </li>
</ol>

Output:
Blog 1
Blog 2

Eg-2 (unordered list):-
<ul>
<li>Blog 1</li>
<li>Blog 2</li>
</ul>

Output:
<li>Blog 1</li>
<li>Blog 2</li>
To make the bullets style change with the text we have to apply the style of the text on its <li> tag.

To do so we will use jquery:

We will get the style of every child span in the <li> tag
Apply it to the <li> tag itself.

Get the style of child tag ( span ) :

$('li span').each(function(i)
		 {
			var font-size = $(this).css('font-size');
			var bg-color = $(this).css('background-color');
			var color = $(this).css('color'); 
			var  font-family = $(this).css('font-family');
                         });    

Now apply these styles on the parent

  • tag:
    $('li span').each(function(i)
    		{
                            	$( this ).parent( "li" ).css('font-size',font-size );
    			$( this ).parent( "li" ).css('background-color',bg-color);
    			$( this ).parent( "li" ).css('color',color);
    			$( this ).parent( "li" ).css('font-family',font-family);
                     	});    
    

    We can set the complete code on setInterval :

    setInterval(function(){
    $('li span').each(function(i)
    	{
    		 var font-size = $(this).css('font-size');
    		 var bg-color = $(this).css('background-color');
    		 var color = $(this).css('color'); 
    		 var  font-family = $(this).css('font-family');
                            $( this ).parent( "li" ).css('font-size', font-size);
    		$( this ).parent( "li" ).css('background-color',bg-color);
    		$( this ).parent( "li" ).css('color',color);
    		$( this ).parent( "li" ).css('font-family',font-family);
    
                 });     
    },100);
    

    This code will run after every 100 ms and apply the style of the child tag to the parent <li> tag. Here are the screenshots showing how it works now:
    apply text style on bullets/number list in CKEditor
    Fig 3: Unordered list after changes
    apply text style on bullets/number list in CKEditor
    Fig 4: Ordered list after changes

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *