Question

如何更改JQTE编辑器的默认高度？
我试过了：

$("textarea").jqte({
height:"400px"
});

该文件没有说明这一点。

Answer 1

您应该尝试在jqte样式表中更改jqte_editor的最小高度值：

 /* editor area */
.jqte_editor, .jqte_source {
    min-height:300px;
}

Answer 2

要锁定编辑器高度以显示滚动条而不是编辑器展开，您需要设置.jqte_editor height或min-height。您还需要设置max-height。

接下来发生的是一个jqte错误：

选择文字并添加粗体/斜体或其他格式
删除格式
所选文字突然继承了 .jqte_editor高度值并将每个元素（文本）推到下面

修复（jqte版本1.4.0）

打开javascript文件jquery-te-1.4.0.js。

搜索并查找function affectStyleAround(element,style)

替换：

if(selectedTag && style==false)
{
    // apply to the selected node with parent tag's styles
    if(selectedTag.parent().is("[style]"))
        selectedTag.attr("style",selectedTag.parent().attr("style"));

    // apply to child tags with parent tag's styles
    if(selectedTag.is("[style]"))
        selectedTag.find("*").attr("style",selectedTag.attr("style"));
}

有了这个：

if(selectedTag && style==false)
{
    // apply to the selected node with parent tag's styles
    if(selectedTag.parent().is("[style]") && !selectedTag.parent().is(".jqte_editor"))
        selectedTag.attr("style",selectedTag.parent().attr("style"));

    // apply to child tags with parent tag's styles
    if(selectedTag.is("[style]") && !selectedTag.parent().is(".jqte_editor"))
        selectedTag.find("*").attr("style",selectedTag.attr("style"));
}

请注意添加的代码：

 && !selectedTag.parent().is(".jqte_editor")

祝你好运！

Answer 3

试试这个

$('.jqte_editor').css({ height: '250px' });

Answer 4

他们没有提供选项，但您可以这样做：

$("textarea").css('min-height','400px').jqte();

这会自动将高度设置为400px

的最小值

Answer 5

也许为时已晚，但我也在寻找一个解决方案而不改变原来的CSS，因为有些页面我想要它默认，有些我想要它自定义尺寸。插件js后简单设置内联css。像这样的东西。

$('.te_editor').jqte({
});

<style>
.jqte_editor{height:350px;max-height:500px;}
</style>

Answer 6

我应用了VKS建议的补丁（稍微修改一下，看看我对他的回答的评论）。

我使用这样的东西来尝试计算编辑区域的高度，采用原始textarea＆＃34;行＆＃34;属性（没有VKS＆＃39; s补丁这会导致可怕的问题）：

var $areas = $("textarea.html-editor");
$areas.each(function (index, textarea) {
    var $area = $(textarea);
    $area.jqte();
    var $editor = $area.closest(".jqte").find(".jqte_editor");
    var height = ($area.attr("rows") * 25 / 15) + "em";
    $editor.css({ "min-height": height, "max-height": height });
});

（计算行* 25/15正是在我的特定情况下使用＆＃34; em＆＃34; s时会发生的事情 - 您将需要使用自己的计算，有很多解决方案，例如measure＆＃34; px＆＃34;带有所需字体等的跨度高度。）

Answer 7

这是解决方案。转到非最小版本以更好地查看此解决方案。我只是添加了少量代码，以便可以传入“高度”作为启动选项，完美插入以控制组件的高度。

在版本1.4.0的第215行，添加此修改：

<div class="'+vars.css+"_editor"+'" style="height:'+vars.height+';"></div>

您正在添加以下代码：

style="height:'+vars.height+';"

然后将{height：'500px'}传递到您的代码中，如下所示：

$(".myCustomTextField").jqte({'height': '500px'});

DONE！

Answer 8

如果你想改变特定文本区域的高度，我会把你的文本区域放在像这样的div中

<div class="custom-jqte">
  <textarea id="yourtextarea"></textarea>
</div>

然后，把它放在一个css文件

上

.custom-jqte .jqte_editor {
   height: 400px;
}

使用此方法，您可以避免更改jquery-te样式表

调整默认高度JQTE

8 个答案: