javascript – 如何使用CKEditor添加悬停效果？

2019年7月28日 217次阅读

我在CKEditor中绘制一个表.

您可以看到当前我的表看起来像这样.

《javascript – 如何使用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>

最佳答案 这是一个脚本,用于突出显示带有橙色背景颜色的复选标记的列.

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())
});

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

请参阅CodePen的工作演示

点赞