Question

我有一个我似乎无法弄清楚的问题。我使用jHtmlArea 0.8和jQuery v3.2.1。我创建了一个TEXTAREA对话框，我使用jHTMLArea转换为HTML编辑区域。

我的问题是HTMLArea似乎已经创建了，但它并没有给我一个编辑区域。我已经搜索过是否有办法控制高度，但根据我在源代码中看到的内容，HTMLArea的高度应该与textarea的大小相匹配。我检查了我的CSS，但找不到任何可能导致此问题的内容。

我已在http://issuesnj.com/sample/在线发布了该网页的简化版本（所有自定义代码均为内嵌）。只需点击+按钮即可看到问题。如果有任何帮助，我将不胜感激。

这里的操作代码是对话框HTML定义和JavaScript。他们在这里：

<div id="divEdit">
    <table>
        <tr>
            <td>Page Name</td>
            <td><input name="pageName" id="pageName" style="width:400px" type="text"></td>
        </tr>
        <tr>
            <td>Page Title (shows on the tab)</td>
            <td><input name="pageTitle" id="pageTitle" style="width:400px" type="text"></td>
        </tr>
        <tr>
            <td>Page Caption</td>
            <td><input name="pageCaption" id="pageCaption" style="width:400px" type="text"></td>
        </tr>
        <tr>
            <td>After upload URL</td>
            <td><input name="afterProcView" id="afterProcView" style="width:400px" type="text"></td>
        </tr>
        <tr>
            <td colspan="2"><br>Page Text:</td>
        </tr>
        <tr>
            <td colspan="2"><textarea name="pageText" id="pageText" rows="20" style="width: 700px;"></textarea></td>
        </tr>   
    </table>
</div>

这里是对话框的javascript和具有htmlarea调用的fnAdd函数...

$(document).ready(function(){
    $("#divEdit").dialog({
        "autoOpen": false,
        "width": "auto",
        "title": "Page Settings",
        "open": function (evt, ui) {
            $("#pageText").htmlarea();
        },
        "buttons": 
        [
            {"text": "Save",
             "click": function(){$("#divEdit").dialog("close");}
            },
            {"text": "Cancel",
             "click": function(){$("#divEdit").dialog("close");}
            }
        ]
    });
});

function fnAdd(){
    $("#id").val("New");
    $("#pageName").val("");
    $("#pageTitle").val("");
    $("#pageCaption").val("");
    $("#pageText").htmlarea('html', '\b');
    $("#afterProcView").val("");
    $("#divEdit").dialog("open");
}

提前致谢！

Answer 1

检查代码后，请注意<iframe style="height: 0px; width: 700px;"></iframe>。将高度更改为您想要的任何值，它应该工作。如果您正在使用jQuery，那么通过指定CSS规则也可以修复。如果您可以发布一些代码，我们可以使用它。

Answer 2

行。我有一个答案，虽然我留下了一个新问题（我想我会分开发布）......

问题是我只有htmlarea（）一次（在编辑期间）。我需要在文档就绪函数中初始化htmlarea。因此，修改后的代码如下所示：

$(document).ready(function(){
    $("#pageText").htmlarea();

    $("#divEdit").dialog({
        "autoOpen": false,
        "width": "auto",
        "title": "Page Settings",
        "open": function (evt, ui) {
            $("#pageText").htmlarea();
        },
        "buttons": 
        [
            {"text": "Save",
             "click": function(){$("#divEdit").dialog("close");}
            },
            {"text": "Cancel",
             "click": function(){$("#divEdit").dialog("close");}
            }
        ]
    });
});

一旦我添加了通用的htmlalrea调用，它就会正确调整大小。至于其他问题，这将是另一个问题的主题。

jHtmlArea创建了一个非常小的编辑区

2 个答案: