如何使用 CKEditor 为 <table> 添加悬停效果？

Question

我在CKEditor中画了一个table

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

目前，我想将鼠标悬停在 table 的列上，它会自动突出显示橙色的复选图标。

我发现要改CSS:

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

我不知道如何申请table。

我的 table 的结构如下：

<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
                    //   &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 Whosebug!!!)
    console.log("\n"+CKE.val())
});

我花时间根据你的table做了一个演示。
下次请 post 你的 HTML!!!

查看 CodePen

上的工作演示

如何使用 CKEditor 为 <table> 添加悬停效果？

How to add hover effect to <table> using CKEditor?

html

javascript

css

jquery

ckeditor