jhtmlarea wysiwyg編輯器 - 添加表格

Question

我已經完成了大量搜索，尋找關於添加自定義工具欄按鈕的信息，該按鈕可以將一張表插入編輯器。

這是我能找到（其中，順便說一句不回答這個問題）： Adding tables in jHtmlArea

人對如何做或者已經見過類似的，我可以作爲參考使用的東西，有什麼想法？

感謝 喬

Answer 1

對不起恢復一個老話題，但我也希望能夠增加使用jhtmlarea表。這是我想出了

$("#editor").htmlarea({ 
    toolbar: [ 
     ["html"], 
     ["bold","italic","underline","strikeThrough","|","subscript","superscript"], 
     ["orderedList","unorderedList"], 
     ["indent","outdent"], 
     ["link","unlink","|","horizontalrule"], 
     ["cut","copy","paste"], 
     [{ 
      css: 'jhtml-table', 
      text: 'Insert Table', 
      action: function(btn) { 
       var t = this, li = btn.closest('li'); 
       var trtd = Array(11).join('<tr>'+Array(11).join('<td></td>')+'</tr>'); 
       var tbl = $('<table tabindex="0"><tbody>' + trtd + '</tbody><tfoot><tr><td colspan="10" style="color:#888;text-align:center;">&nbsp;</td></tr></tfoot></table>') 
        .css({position:'absolute', background:'#fff', border:'#bbb 1px solid', outline:'0 none'}) 
        .appendTo(li) 
        .focus().blur(function(e){ tbl.remove(); }); 
       tbl.find('tbody td').css({border:'#bbb 1px solid',height:'12px',width:'12px'}) 
        .hover(function(e){ 
         var td = $(this), 
          x = td.index()+1, 
          y = td.closest('tr').index()+1; 
         tbl.find('tfoot td').html(x + 'x' + y); 
         tbl.find('tbody tr').slice(0,y).each(function(i){ 
          $(this).find('td').slice(0,x).css({background:'#ddd'}); 
          $(this).find('td').slice(x).css({background:'none'}); 
         }); 
         tbl.find('tbody tr').slice(y).each(function(i){ 
          $(this).find('td').css({background:'none'}); 
         }) 
        }) 
        .click(function(e){ 
         var td = $(this), 
          x = td.index()+2, 
          y = td.closest('tr').index()+2; 
         t.pasteHTML('<table class="display-table"><tbody>' + Array(y).join('<tr>'+Array(x).join('<td>&nbsp;</td>')+'</tr>') + '</tbody></table>'); 
         tbl.remove(); 
        }); 

      } 
     }] 
    ], 
    css: "css/jHtmlArea.editor.css" 
}); 

我沒有做過任何跨瀏覽器測試（它的作品在Chrome中），這是非常簡單的，但是它給出了一個快速的方法在HTML表格下降。