Question

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

在默认的格式化程序中，我正在定义我的textarea，它将成为我的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类并导致工具栏混乱。

还希望获得带有选项的Type的选择编辑器 OL（val：0）， CR（val：1），和WB（val：2）

小提琴：http://jsfiddle.net/Mrbaseball34/qdt8t7jr/

Answer 1

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

等待并运行htmlarea功能中的onExpandRow功能，工具栏将正确设置。

    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/

jHTMLArea动态设置

1 个答案: