jhtmlarea 所见即所得编辑器 - 添加表格答案

【问题标题】：jhtmlarea wysiwyg editor - Adding Tablejhtmlarea 所见即所得编辑器 - 添加表格
【发布时间】：2014-03-05 18:01:58
【问题描述】：

我进行了广泛的搜索，寻找有关添加自定义工具栏按钮的信息，该按钮将在编辑器中插入表格。

这就是我能找到的所有内容（顺便说一句，这并没有回答问题）： Adding tables in jHtmlArea

有人对如何做有任何想法，或者看到过类似的东西可以作为参考吗？

谢谢乔

【问题讨论】：

标签： jquery jhtmlarea

【解决方案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 表格的方法。

【讨论】：