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