Adjust default height JQTE

Question

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.

Answer 1

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

Answer 2

try this

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

Answer 3

You should try changing the min-height value for jqte_editor in jqte stylesheet:

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

Answer 4

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!

Answer 5

maybe too late but i was looking for a solution too without changing the original css as some pages i want it default and some i want it custom size. simple set inline css after the plugin js. something like this.

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

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

Answer 6

I applied the patch suggested by VKS (with a slight mod, see my comment on his answer).

I use something like this to try to calculate the height of the edit area taking the original textarea "rows" attribute (without VKS's patch this causes horrible problems):

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

(that calculation rows*25/15 is just what happens to work for me in my particular case using "em"s - you will want to use your own calculation, there are many solutions e.g. measure "px" height of span with desired font etc.)

Answer 7

Here is THE solution. Go to the non-min version to better see this solution. I just added a tiny amount of code to make it possible to pass in "height" as a startup option that gets perfectly inserted to control the height of the component.

On line 215 of version 1.4.0, add this modification:

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

You're adding the following code:

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

Then pass in {height:'500px'} into your code like so:

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

DONE!

Answer 8

If you want to change the height of a specific textarea, i sugest you to put your text area inside a div like this

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

then, put this on a css file

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

With this method, you avoid changing the jquery-te stylesheet