Dostosuj domyślną wysokość JQTE

Question

Jak zmienić domyślną wysokość edytora JQTE?
Próbowałem:

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

Dokument nie mówi nic na ten temat.

Answer 1

Nie przewidują opcję, ale można to zrobić:

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

To automatycznie ustawić wysokość do minimum 400px

Answer 2

spróbować tej

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

Answer 3

powinieneś spróbuj zmienić wartość min-height dla jqte_editor w arkuszu stylów jqte:

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

Answer 4

Aby zablokować wysokość edytorów, aby zamiast edytora rozwijał się pasek przewijania, należy ustawić wartość .jqte_editorheight lub min-height. Musisz także ustawić max-height.

Co happends obok jest błąd jqte:

• Zaznacz tekst i dodać pogrubienie/kursywa lub inne formatowanie
• Usuń formatowanie
• Zaznaczony tekst nagle dziedziczy .jqte_editor wysokość wartości i przesuwa każdy element (tekst) pod niższy dół

Poprawka (jqte wersja 1.4.0)

Otwórz plik javascript jquery-te-1.4.0.js.

Szukaj i znajdź function affectStyleAround(element,style)

Wymienić:

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

z tym:

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

Wskazówka dodany kod:

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

Powodzenia!

Answer 5

może być za późno, ale szukałem również rozwiązania bez zmiany oryginalnego css, ponieważ niektóre strony powinny być domyślne, a niektóre mają niestandardowy rozmiar. prosty zestaw inline css po wtyczce js. coś takiego.

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

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

Answer 6

Zaaplikowałem łatkę zaproponowaną przez VKS (z niewielkim modyfikatorem, zobacz mój komentarz do jego odpowiedzi).

używam czegoś takiego spróbować obliczyć wysokość obszaru edycji biorąc oryginalny textarea „wiersze” atrybutu (bez patcha VKS za to powoduje straszne problemy):

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

(czyli wierszy obliczeniowych * 25/15 jest właśnie tym, co działa dla mnie w moim konkretnym przypadku przy użyciu "em" - będziesz chciał użyć własnych obliczeń, istnieje wiele rozwiązań, np. Zmierz "px" wysokość przęsła z żądaną czcionką itp.)

Answer 7

Oto rozwiązanie. Przejdź do nie-min wersji, aby lepiej zobaczyć to rozwiązanie. Właśnie dodałem niewielką ilość kodu, aby umożliwić przekazanie "wysokości" jako opcji startowej, która zostanie idealnie wstawiona w celu kontrolowania wysokości komponentu.

Na linii 215 w wersji 1.4.0, dodać tę zmianę:

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

Ty dodajemy następujący kod:

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

następnie przekazać w {height: '500px'} do Twój kod jak:

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

ZOSTAŁ!

Answer 8

Jeśli chcesz zmienić wysokość konkretnego textarea, I sugest można umieścić swój obszar tekstu wewnątrz div jak to

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

następnie umieścić to w pliku css

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

Ta metoda pozwala uniknąć zmiany arkusza stylów jquery-te