如何将悬停效果添加到使用CKEditor？

Question

我在CKEditor中绘制一个表。

你可以看到我当前的表格看起来像这样。

目前，我想要悬停表格的列，它会自动突出显示橙色的检查图标。

我发现更改了CSS：

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

我不知道如何适用于表格。

我的表格结构如下：

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

Answer 1

这是一个脚本，用于突出显示带有橙色背景颜色的复选标记的列。

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
                    //     is the html entity for a space
                    //   CKEditor always insert a space in "empty" cells.
                    if( thisTD.html() != " " ){
                        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())
});

我花时间根据你的桌子做了一个演示 请下次发布您的HTML !!!

请参阅CodePen

上的工作演示