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

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