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

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.

Fig 1: Unordered 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:
  
  Fig 3: Unordered list after changes
  
  Fig 4: Ordered list after changes