5

How can I change the default height of a JQTE editor?
I've tried:

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

The document does not say anything about this.

4

8 回答 8

4

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

 /* editor area */
.jqte_editor, .jqte_source {
    min-height:300px;
}
于 2014-05-20T07:31:46.700 回答
2

To lock editors height so a scrollbar appears instead of the editor expanding, you need to set .jqte_editor height or min-height. You also need to set max-height.

What happends next is a jqte bug:

  • Select a text and add bold/italic or some other formatting
  • Remove the formatting
  • The selected text suddenly inherits the .jqte_editor height values and pushes every element (text) beneath further down

Fix (jqte version 1.4.0)

Open the javascript file jquery-te-1.4.0.js.

Search and find function affectStyleAround(element,style)

Replace:

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

With this:

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

Notice the added code:

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

Good luck!

于 2015-05-01T08:23:02.333 回答
1

尝试这个

$('.jqte_editor').css({ height: '250px' });
于 2014-04-14T05:58:34.037 回答
0

They don't provide an option, but you can do this:

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

This will automatically set the height to minimum of 400px

于 2014-04-13T06:10:00.777 回答
0

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

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

<style>
.jqte_editor{height:350px;max-height:500px;}
</style>
于 2015-05-17T20:47:17.757 回答
0

我应用了 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”高度ETC。）

于 2015-11-30T16:19:50.913 回答
0

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

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

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

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

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

于 2016-03-25T16:33:29.587 回答
0

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

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

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

您正在添加以下代码：

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

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

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

完毕！

于 2015-12-16T22:24:56.823 回答