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