Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery]Problem z CKEditor-em
Forum PHP.pl > Forum > Po stronie przeglądarki
kasior
10.04.2014, 08:27:24
Mam problem z umieszczeniem editora w osobnych tabsach. Dokładnie uzywam jquery easytabs.
Mam panel wielojezyczny i dla każdego języka jest tab. Niestety ckeditor nie ładuje zawartosci dla każdego taba tylko dla pierwszego lub dla tego na którym odświeżymy stronę.
Próbowałem juz na rózne sposoby odpalac CKeditor i nic. Żadne destroy nie pomaga ani nic. mam także funkcje Smarty do odpalania editora i też dziala tak samo. W FCKeditorze nie było tego problemu a tutaj nie wiem co zrobić i też nie mogę sie doszukać rozwiązania.

Kawałek kodu:

[PHP] pobierz, plaintext 
  1.  
  2. {literal}
  3. <script src="ckeditor/ckeditor.js"></script>
  4. <script src="ckeditor/adapters/jquery.js"></script>
  5.         <script type="text/javascript">
  6. 		$(document).ready( function() {
  7. 		       $('#tab-container').easytabs('fast');
  8.  
  9. 		});
  10. 	</script>
  11. {/literal}
  12.  
  13. <div id="tab-container" class="tab-container">
  14.     <ul class="etabs">
  15.        {section start=0 step=1 name=j loop=$jezyki}
  16.            <li class="tab"><a href="#{$jezyki[j]}"><img src="{$smarty.const.WWW}images/flags/{$jezyki[j]}.png" /> {$jezyki[j]}</a></li>
  17.         {/section}
  18.      </ul>
  19.          <div class="panel-container">
  20.  
  21.             {section start=0 step=1 name=j loop=$jezyki}
  22.             {assign var="lng" value="`$jezyki[j]`"}
  23.             {assign var="title" value="title_`$jezyki[j]`"}
  24.             {assign var="pcontent" value="content_`$jezyki[j]`"}
  25.  
  26.  
  27.  
  28.             <div id="{$jezyki[j]}">
  29.  
  30.                     <div class="formfields"><label for="titlepl">Tytuł strony:</label><input type="text" value="{$page.$title}" name="title[{$jezyki[j]}]" style="width:690px;" /></div>
  31.                      <div class="formfields">
  32.                      <label for="titlepl">Zawartość:</label><br /><br />
  33.                         {if $setts[0].editor == "fck"}
  34.  
  35.                                 {fckeditor BasePath="fckeditor/" InstanceName="content[$lng]" Width="700px" Height="450px" Value=$page.$pcontent|stripslashes} 
  36.                         {else}
  37.  
  38.                             <textarea name="content[{$jezyki[j]}]" id="text{$jezyki[j]}" style="width:690px; height:300px" tabindex="{$smarty.section.j.rownum}" class="ckeditor">{$page.$pcontent|stripslashes}</textarea>
  39.                             {literal}
  40. 			    <script type="text/javascript">
  41.                                 $(document).ready(function(){
  42.                                     $('#text{/literal}{$jezyki[j]}{literal}').destroy();
  43.                                     $('#text{/literal}{$jezyki[j]}{literal}').ckeditor();
  44.                                     }); 
  45.                              </script>
  46.                             {/literal}
  47.                         {/if}
  48.  
  49.                     </div>
  50.                     <div class="clearing"></div>
  51.                </div>
  52.  
  53.             {/section}
  54.         </div>
  55.  </div>  
[PHP] pobierz, plaintext
Kshyhoo
10.04.2014, 08:35:53 
[PHP] pobierz, plaintext 
  1.  {if $setts[0].editor == "fck"}
  2.  
  3. {fckeditor BasePath="fckeditor/" InstanceName="content[$lng]" Width="700px" Height="450px" Value=$page.$pcontent|stripslashes} 
[PHP] pobierz, plaintext

Masz tam zmienne po FCKeditor, chyba powinny być CKeditor?
trueblue
10.04.2014, 08:41:50
Spróbuj podpinać edytor na zdarzeniu: easytabs:after
kasior
10.04.2014, 09:00:42
Ale,ze w pętli czy przed?

na razie dałem w pętli:

[PHP] pobierz, plaintext 
  1. $(document).ready(function(){
  2. 	$('#tab-container')
  3. 		 .bind('easytabs:after', function() {
  4. 		 $('#text{/literal}{$jezyki[j]}{literal}').ckeditor();
  5.           }); 
  6. });
[PHP] pobierz, plaintext


Bez skutku sad.gif


>> Kshyhoo - patrzysz na kod od FCK editora. Poniżej jest dla CK.
trueblue
10.04.2014, 09:11:08 
[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  $('#tab-container').bind('easytabs:after',function(evt, tab, panel, data) {
  3.    panel.find('textarea[id^="text"]').destroy().ckeditor(); //jeśli nie zadziała to rozdziel na dwie
  4.    }
  5.  });
  6. });
[HTML] pobierz, plaintext
kasior
10.04.2014, 09:35:34
niestety. Ani razem ani osobno. W tej chwili mamy tak:

[PHP] pobierz, plaintext 
  1. <script src="ckeditor/ckeditor.js"></script>
  2.     	<script src="ckeditor/adapters/jquery.js"></script>
  3.    		{literal}
  4.         <script type="text/javascript">
  5. 			$(document).ready( function() {
  6. 			  $('#tab-container').easytabs('fast');
  7. 			  $('#tab-container').bind('easytabs:after',function(evt, tab, panel, data) {
  8. 					panel.find('textarea[id^="text"]').destroy(); //jeśli nie zadziała to rozdziel na dwie
  9. 					panel.find('textarea[id^="text"]').ckeditor();
  10. 					});
  11. 			});
  12. 		 </script>
  13.         {/literal}
  14.  
  15. <div id="tab-container" class="tab-container"> ..... 
[PHP] pobierz, plaintext
trueblue
10.04.2014, 09:49:17
Odpal w Chrome konsolę (F12), zakładka Console.
Zobacz czy nie wyrzuca jakichś błędów JS.
kasior
10.04.2014, 09:53:10
Uzywam Firefoxa i Firebug-a.

[PHP] pobierz, plaintext 
  1. Czas: 10/04/2014 10:51:26
  2. Błąd: TypeError: panel.find(...).destroy is not a function
  3. Plik źródłowy: <a href="http://cmc.loc/panda/admin.php?module=pages&action=editpage&idp=1#pl" target="_blank">http://cmc.loc/panda/admin.php?module=page...ge&idp=1#pl</a>
  4. Wiersz: 98
[PHP] pobierz, plaintext
trueblue
10.04.2014, 10:02:39
Nie wiem czy poprawnie używasz funkcji destroy.
Ale tak na szybko:


[HTML] pobierz, plaintext 
  1. $(document).ready( function() {
  2.  $('#tab-container').easytabs('fast');
  3.  $('#tab-container').bind('easytabs:after',function(evt, tab, panel, data) {
  4.   panel.find('textarea[id^="text"]:not(.ckeditor)').addClass('ckeditor').ckeditor();
  5.  });
  6. });
[HTML] pobierz, plaintext

kasior
10.04.2014, 10:08:39
i to ci powiem już działa ale dopiero po pierwszym klinięciu tabsa. Trzeba by coś jeszcze dodac co odpali pierwszy tab po załadowaniu strony.

wcześniej dawałem z twojego kodu

[PHP] pobierz, plaintext 
  1.   $('#tab-container').easytabs('fast');
  2. 			$('#tab-container').bind('easytabs:after',function(evt, tab, panel, data) {
  3. 			$('#tab-container').find('textarea[id^="text"]').ckeditor();
  4. 	});
[PHP] pobierz, plaintext


i tez zaczęło działac ale w dwóch pierwszych zakładkach,.
to z klasami dobre - mogłem na to wpasc kurcze
trueblue
10.04.2014, 10:14:22
http://os.alfajango.com/easytabs/#public-methods
kasior
10.04.2014, 10:21:22
wiem smile.gif mam to cały czas otwarte i patrzę ale chyba mam jakies problemy z zastosowaniem odpowiednim smile.gif
trueblue
10.04.2014, 10:29:11 
[HTML] pobierz, plaintext 
  1. $('#tab-container').easytabs('select',$('#tab-container ul.etabs li.tab:eq(0)'));
[HTML] pobierz, plaintext

Jako ostatnia linijka.
kasior
10.04.2014, 10:40:44
to mi wywala błąd jquery:

Czas: 10/04/2014 11:40:07
Błąd: Error: Syntax error, unrecognized expression: a[object Object]
Plik źródłowy: http://tkomp.loc/panda/js/jquery-2.0.3.min.js
Wiersz: 4

[PHP] pobierz, plaintext 
  1. $(document).ready( function() {
  2. 		$('#tab-container').easytabs('fast');
  3.      		$('#tab-container').bind('easytabs:after',function(evt, tab, panel, data) {
  4. 			panel.find('textarea[id^="text"]:not(.ckeditor)').addClass('ckeditor').ckeditor();
  5. 		});
  6. 		$('#tab-container').easytabs('select',$('#tab-container ul.etabs li.tab:eq(0)'));
  7. });
[PHP] pobierz, plaintext
trueblue
10.04.2014, 10:47:37
Może tak:
[HTML] pobierz, plaintext 
  1. $('#tab-container').easytabs('select','#tab-container ul.etabs li.tab:eq(0)');
[HTML] pobierz, plaintext
kasior
10.04.2014, 11:13:28
Może inaczej. Postanowiłem to wyrzucic do funkcji i potem to obrabiac i teraz dziala i wygląda tak:

[PHP] pobierz, plaintext 
  1. function createEditor(panel){
  2. 	var textarea = panel.find('textarea[id^="text"]:not(.ckeditor)');
  3. 	if (!textarea.hasClass("ckeditor")){
  4. 		textarea.addClass('ckeditor').ckeditor();
  5.         }
  6.  
  7. }
  8. $(document).ready( function() {
  9. 	$('#tab-container').easytabs('fast');
  10.      	$('#tab-container').bind('easytabs:after',function(evt, tab, panel, data) {
  11. 		createEditor(panel);
  12. 	});
  13. 	createEditor($("#pl"));
  14. });
[PHP] pobierz, plaintext


Dzieki za pomoc. Widze,ze zawsze można na ciebie liczyć smile.gif Klikam Pomógł oczywiście smile.gif
trueblue
10.04.2014, 11:16:02
Nie ma za co.
To jest niepotrzebne:
[HTML] pobierz, plaintext 
  1. if (!textarea.hasClass("ckeditor")){
[HTML] pobierz, plaintext

ten warunek załatwia już selektor :not(.ckeditor)
Albo zostaw warunek, ale wyżej:
[HTML] pobierz, plaintext 
  1. var textarea = panel.find('textarea[id^="text"]');
[HTML] pobierz, plaintext
kasior
10.04.2014, 11:27:19
Faktycznie masz rację. to jest niepotrzebne. Wywalilem wink.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.