javascript - jHTMLArea-动态设置

Question

我正在使用 jQueryEasyUI datagridview: http://www.jeasyui.com/extension/datagridview.php

在默认格式化程序中，我正在定义我的文本区域，它将成为我的 jHTMLArea:

detailFormatter: function(rowIndex, rowData){
    var x = rowIndex + 1;
    html = '<table>'+
           '    <tr>' +
           '       <td style="border:0">' +
           '           <textarea id="text_'+x+'" cols="125" rows="25">'+rowData.text+'</textarea>' +
           '           <button type="submit" class="btn btn-primary" onclick="save();">Save</button>'+
           '           <button type="submit" class="btn btn-info" onclick="discard();">Discard</button>'+
           '       </td>' +
           '   </tr>'+
           '</table>';
    $('#text_'+ x).htmlarea({
        css: 'style/jHtmlArea.Editor.css',
        toolbar: [
            ["bold", "italic", "underline"],
            ["p", "h3"],
            ["link", "unlink"]
        ]
    });
    $('#text_'+ x).hide();

现在，当我展开行以显示详细信息时，我加载 jHTMLArea:

onExpandRow: function(rowIndex, rowData) {
    var x = rowIndex + 1;
    window.index = x;
    window.gk_text = rowData.text;
    setHTML(x, rowData.text);
}

和:

function setHTML(rel, text) {
        var html = text;
        html = html.replace(/\[/g, '<').replace(/\]/g, '>');
        $('#text_'+ rel).htmlarea('html', html);
}

这是数据示例:

{"totals": 2, 
 "rows": [{ id: 0, prg_code: "ABC", state: "OL", text: "[h3]Important Information[/h3][p]This is a notice.[/p]"},
          { id: 0, prg_code: "DEF", state: "WB", text: "[h3]Important Information[/h3][p]This is a another notice.[/p]"}]
}

如您所见，我将工具栏按钮设置为仅显示:

["bold", "italic", "underline"],
["p", "h3"],
["link", "unlink"]

但是，当我展开该行时，编辑器具有所有默认按钮。

有什么想法可以做到这一点并使编辑器 100% 适合编辑器区域吗？注意:“保存”和“放弃”按钮按预期工作。

哦，还有一件事，当与 Bootstrap 结合使用时，Bootstrap .h？类覆盖 jHTMLArea 类并导致工具栏困惑。

还想获得一个带有选项的类型选择编辑器OL(值:0)，CR(值:1)，和白平衡(值:2)

fiddle :http://jsfiddle.net/Mrbaseball34/qdt8t7jr/

Answer 1

您的问题是您尝试在尚不存在的 textarea 上运行 htmlarea 函数。 detailFormatter 函数返回将要呈现的 html，但不会将其添加到 dom。

等待并运行onExpandRow函数中的htmlarea函数，工具栏将被正确设置。

    detailFormatter: function(rowIndex, rowData){
        var x = rowIndex + 1;   html = '<table style="width:100%">'+
               '    <tr>' +
            '       <td style="border:0;margin:0;padding:0;width:100%">' +
            '           <textarea id="text_'+x+'" style="width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" rows="25">'+rowData.text+'</textarea>' +
               '           <button type="submit" class="btn btn-primary uppercase" onclick="save();">Save</button>'+
               '           <button type="submit" class="btn btn-info uppercase" onclick="discard();">Discard</button>'+
               '       </td>' +
               '   </tr>'+
               '</table>';
       return html;
    },
    onExpandRow: function(rowIndex, rowData) {
        var x = rowIndex + 1;
        window.index = x;
        window.gk_text = rowData.text;
        html = rowData.text.replace(/\[/g, '<').replace(/\]/g, '>');
        $('#text_'+ x).htmlarea({
            toolbar: [
                ["bold", "italic", "underline"],
                ["p", "h3"],
                ["link", "unlink"]
            ]
        });
        $('#text_'+ x).htmlarea('html', html);
    }

http://jsfiddle.net/qdt8t7jr/10/