How to add hover effect to using CKEditor?
Tags: javascript,jquery,html,css,ckeditor

Problem :

I draw a table in CKEditor.

You can see current my table look like this.

Currently, I want to hover columns of the table and it will auto highlights check icon with the colour orange.

I found to change CSS:

CKEDITOR.config.contentsCss = '/mycustom.css';
CKEDITOR.replace('myfield');

I don't know how to apply in the table.

My table has structure like:

<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>


Solution :

Here is a script to highlight columns where there is checkmarks with an orange background-color.

var CKE = $( '.editor' );
CKE.ckeditor();
var columnIndex=0;

$("#update").click(function(){
    // Output CKEditor's result in a result div
    $("#result").html(CKE.val());

    // If there is a table in the result
    if( $("#result").find("table") ){
        console.log("Table found.");

        // On mouse over a td
        $("#result").find("td").on("mouseover",function(){
            // find the column index
            columnIndex = $(this).index();

            // Condition is to ensure no highlighting on the 2 firsts columns
            if(columnIndex>1){
                $(this).closest("table").find("tr").each(function(){
                    var thisTD = $(this).find("td").eq(columnIndex);

                    // If cell is not empty
                    //   &nbsp; is the html entity for a space
                    //   CKEditor always insert a space in "empty" cells.
                    if( thisTD.html() != "&nbsp;" ){
                        thisTD.addClass("highlight");
                    }
                });
            }

            // Clear all hightlights
        }).on("mouseout",function(){
            $(this).closest("table").find("td").removeClass("highlight");
        });
    }

    // Console log the resulting HTML (Usefull to post HTML on StackOverflow!!!)
    console.log("\n"+CKE.val())
});

I took the time to make a demo based on your table.
Please, next time, post your HTML!!!

See working demo on CodePen


    CSS Howto..

    How I do edit the css for just the home page on Magento?

    How to set margin left and right to the center div when using float:left

    How to stop web content from being displayed before css/jquery is prepared?

    site only shows half screen on mobile? Rest of screen is just body background?

    How to get rid of spaces between images in CSS?

    How to stretch div height to fill parent div - CSS

    How to set out css properly?

    CSS: How to get a button to always be to the left of another button that's in a corner?

    How to move stacked columns up (using bootstrap but any css will do)

    How to re-size constantly changing text to fit in a div with a fixed width, based on the changing of a