调整默认高度 JQTE答案

【问题标题】：Adjust default height JQTE调整默认高度 JQTE
【发布时间】：2014-04-13 06:06:17
【问题描述】：

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

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

文件没有说明这一点。

【问题讨论】：

标签： jquery css jqte

【解决方案1】：

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

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

【讨论】：

如果在样式之后包含 JQTE CSS（例如body .jqte_editor, body .jqte_source 甚至.jqte_editor.jqte_editor, .jqte_source.jqte_source），您将需要增加选择器的特异性

【解决方案2】：

要锁定编辑器高度以显示滚动条而不是扩展编辑器，您需要设置.jqte_editorheight 或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")

祝你好运！

【讨论】：

我认为第二部分应该是 "if(selectedTag.is("[style]") && !selectedTag.is(".jqte_editor"))" （去掉 .parent() 位）

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

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

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

这会自动将高度设置为400px的最小值

【讨论】：

【解决方案5】：

也许为时已晚，但我也在寻找解决方案，而无需更改原始 css，因为有些页面我希望它默认，有些我希望它自定义大小。在插件 js 之后简单设置内联 css。像这样的。

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

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

【讨论】：

你JS上的选择器不对，应该是.jqte_editor，和CSS一样。此外，请始终将样式放在文档的标题上，在 JavaScript 代码之前。

【解决方案6】：

我应用了 VKS 建议的补丁（带有轻微的 mod，请参阅我对他的回答的评论）。

我使用类似的东西来尝试计算编辑区域的高度，采用原始文本区域“行”属性（没有 VKS 的补丁，这会导致可怕的问题）：

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 });
});

（在我使用“em”的特殊情况下，计算行*25/15 恰好对我有用 - 你会想要使用自己的计算，有很多解决方案，例如测量跨度的“px”高度使用所需的字体等）

【讨论】：

【解决方案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'});

完成！

【讨论】：

【解决方案8】：

如果您想更改特定文本区域的高度，我建议您将文本区域放在这样的 div 中

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

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

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

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

【讨论】：