GoldenLine
Zaloguj się
Michał Zakrzewski

Michał Zakrzewski doradca, Inertel

Temat: Obszar roboczy edytora Tinymce - jakby nie patrzył textarea.

Jak wiadomo Tinymce daje możliwość wprowadzania różnego rodzaju treści w textarea. Mam problem z tym, że muszę zmierzyć ile tej treści wprowadzono w pikselach do edytora.

Przykład treści, która powoduje, że obszar roboczy się wydłuża :

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

albo zdjęcie o zbyt dużych wymiarach.

Dlatego po pierwsze chcę uniemożliwić użytkownikom wprowadzanie takich treści, a po drugie chcę obliczyć ich wymiar .

Patynie jak obliczyć wymiar takiego elementu?

kod html wycinek
[code]
<textarea name="dane_text" id="tiny" class="tinymce"></textarea>
[code]
kod js wycinek
[code]$("#pokaz_wymiar").change(
function (){
var wymi;

wymi= document.getElementById("tinymce").offsetWidth;
alert("wymiar"+wymi);
});
[/code]

Nie wiem z jakiego elementu drzewa dom sczytywać wymiar obszaru edytora. Jak czytam z drzewa dom to jest bliżej nieokreślony błąd, który powoduje , że alert w js się nie wyświetla.
kod innerhtml , który wyprodukował edytor tinymce
[code]<body id="tinymce" class="mceContentBody " spellcheck="false" dir="ltr">
[/code]
Jak czytam po elemencie id="tiny" to mam wartość 0 . A przyładowaniu elementu jest chwilowa wartość 160 px bo edytor jeszcze się nie zdążył załadować.[edited]Michał Zakrzewski edytował(a) ten post dnia 27.04.11 o godzinie 22:51[/edited]
Link do wypowiedziLink
Mariusz Witek

Mariusz Witek Programista PHP,
Front-End Developer

Temat: Obszar roboczy edytora Tinymce - jakby nie patrzył textarea.

Nie wystarczy Ci overflow: hidden?

Jeśli musisz jednak sprawdzić rozmiary danego elementu, to najłatwiej wykorzystać do tego celu jQuery i metodę .width() oraz height() na danym elemencie. W przypadku TinyMCE będzie to o ile dobrze pamięta iframe > body o odpowiednim ID, sprawdź sobie dokładnie w FireBugu.Mariusz Witek edytował(a) ten post dnia 27.04.11 o godzinie 23:21
Link do wypowiedziLink
Michał Zakrzewski

Michał Zakrzewski doradca, Inertel

Temat: Obszar roboczy edytora Tinymce - jakby nie patrzył textarea.

Niestety to nie takie proste żeby uciec się do css. Nie mogę go stosować bo ja chcę wykryć ile kto tekstu wprowadził. Te dane potem będą mi potrzebne do tego żeby wyliczyć tło po tekstem. Normalnie używał bym css ale nie mogę. Stąd też napisałem sobie w php coś co działa jak background-repeat-y i składam tło w php, żeby wpasować je do szablonu, który potem wysyłam e-mailem. A jak wiadomo background w e-mailach nie przejdzie. Tak wiec pozostało tylko img src.

Teraz muszę wykryć wielkość obszaru roboczego.

<td>

<textarea id="tiny" class="tinymce" name="oferta_tresc" style="display: none;" aria-hidden="true"></textarea>

<span id="tiny_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="tiny_voice">

<span id="tiny_voice" class="mceVoiceLabel" style="display:none;">{#aria.rich_text_area}</span>

<table id="tiny_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 540px; height: 500px;">

<tbody>

<tr class="mceFirst" role="presentation">

<tr>

<td class="mceIframeContainer mceFirst mceLast">

<iframe id="tiny_ifr" frameborder="0" src="javascript:""" title="{#aria.rich_text_area}{#advanced.help_shortcut}" style="width: 100%; height: 410px;">

<html>

<head xmlns="http://www.w3.org/1999/xhtml">

<body id="tinymce" class="mceContentBody " spellcheck="false" dir="ltr">

<p>

sdfasdf

sdfasd asdf

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

<br data-mce-bogus="1">

</p>

</body>

</html>

</iframe>

</td>

</tr>

<tr class="mceLast">

</tbody>

</table>

</span>

</td>


Jak zidentyfikować klasę mceContentBody ?

Jak mam się do niej odnieść w jquery ? muszę określić wymiar tego elementu a ciągle uzyskuje wartość null.

odwołuje się następująco :

 

var wymi = $('.mceContentBody ').width() ;

  alert("wymiar"+wymi);


To jest w iframe może dlatego jest null ? Muszę mieć wymiar ramki pływającej.Michał Zakrzewski edytował(a) ten post dnia 28.04.11 o godzinie 01:20
Link do wypowiedziLink
Michał Zakrzewski

Michał Zakrzewski doradca, Inertel

Temat: Obszar roboczy edytora Tinymce - jakby nie patrzył textarea.

Nadal mam problem :

Udało mi się co prawda odczytać wartość :


var wm =  $("#tiny_ifr").contents().find("p").width();



lub 



var wm =  $("#tiny_ifr").contents().find("body").width();


Niestety jak wpiszę tekst i ramka się wydłuży to uzyskuje wymiar do szerokości iframe na stronie.

Jak odczytać wielkość pływającej ramki ?Michał Zakrzewski edytował(a) ten post dnia 28.04.11 o godzinie 01:53
Link do wypowiedziLink
Wojciech J.

Wojciech J. mistrz wwwujitsu

Temat: Obszar roboczy edytora Tinymce - jakby nie patrzył textarea.

Michał Zakrzewski:
Niestety to nie takie proste żeby uciec się do css. Nie mogę go stosować bo ja chcę wykryć ile kto tekstu wprowadził. Te dane potem będą mi potrzebne do tego żeby wyliczyć tło po tekstem.

Możesz dokładnie wytłumaczyć co chcesz uzyskać, bo dla mnie to bełkot.
Do łamania tekstu wychodzącego poza z góry zdefiniowaną szerokość kontenera użyj word-wrap:break-word. Tym samym można skalować obraz, do czego wystarczy w zupełności max.szerokość kontenera.

A o co biega z wyliczaniem tła pod tekstem, to już zupełnie nie pojmuję.
Chcesz rozciągać obraz w tle do szerokości okna, czy jak ?

edit:
Niestety to nie takie proste żeby uciec się do css.
Nie mogę go stosować bo ja chcę wykryć ile kto tekstu wprowadził.

Jaki problem ustalić określoną wysokość linii w css, a potem zliczyć ilość znaków wprowadzonych przez użytkownika ?Wojciech J. edytował(a) ten post dnia 28.04.11 o godzinie 15:50
Link do wypowiedziLink
Michał Zakrzewski

Michał Zakrzewski doradca, Inertel

Temat: Obszar roboczy edytora Tinymce - jakby nie patrzył textarea.

Ale ja nie chcę niczego skalować i łamać. Chcę znać wymiar elementów jakie ktoś wprowadza edytorem tinymce. Jak ktoś wprowadzi tabelki, zdjęcia itd. Przekraczające szerokość to potem szablon się rozjedzie. A szablon jest wysyłany emalem. Nie wiem czy wiesz, że w e-mailach nie można używać background, a tło mogę wysłać tylko jako obraz img lub jako bgcolor. Dlatego też gdy ktoś do szablonu wprowadzi za dużo kontekstu to się rozwali cała grafika.

No i muszę znać wielkość iframe z kontekstem. 



var wymiar = $("#iframe").contents().find("body").width();


Niestety tym sposobem nadal mam tylko wielkość samej ramki, a nie zwartości ramki.

Jak będę miał dane ile wynosi wysokość i szerokość kontekstu w iframe to użyję funkcji w php, przez którą dorobię tło i załączę do emaila jako jeden cały obrazek tła. Moja funkcja już sobie z tym radzi. Parsuje cały kod i raz dwa zastępuje dane background na <img src="cid:obrazek.jpg" >.

Dzięki temu wynalazkowi mam e-maile w szablonach.Michał Zakrzewski edytował(a) ten post dnia 28.04.11 o godzinie 17:32
Link do wypowiedziLink
Michał Zakrzewski

Michał Zakrzewski doradca, Inertel

Temat: Obszar roboczy edytora Tinymce - jakby nie patrzył textarea.

Dobra zrobiłem : 



$(document).ready(function() {

 

 

 

 

 setTimeout(function(){ 

var height_y = parseInt($('#myFrame').contents().find('body').attr('scrollHeight'));

alert( height_y);

},1500);

 

 

 

});


Działa pod IE, Opera i FF. Width robi się analogicznie .
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Poszukuje czlowieka, nie pr...




Wyślij zaproszenie do
Anuluj