Zagłębiając się dalej w biblioteke jQuery UI - bardzo spodobał mi się efekt i wygląd Accordion. A że teoretycznie można do każdej z tych zakładek wrzucać różną zawartość to postanowiłem wrzucić tam CKEditor. Idealnie by to wyglądało np w jakimś panelu CMS gdzie jest kilka zakładek Accordion i w nich np CKEditor do edycji treści.
Mało miejsca zajmuje i ładnie wygląda.

Samo wrzucenie edytora do Accordion nie jest żadnym problemem. I na pierwszy rzut oka wszystko ok działa.
Jednak po chwili zauważyłem że jak się popisze troszkę w edytorze, entery, itd i później przełącza się miedzy zakładkami - to w momencie zejścia z aktywnej zakładki z edytorem lub po przełączeniu wejście na ta zakładkę następuje takie szybkie "mignięcie" całej strony - jakby przeładowanie - chodź praktycznie ono nie występuje i to tylko na zakładkach gdzie jest ten ckeditor.

Czy ktoś spotkał sie może z taką sytuacją? Próbował umieszczać CKEditora w jQuery UI Accordion?

Za wszelką pomoc i sugestie będę wdzięczny.
Może ewentualnie też podpowiecie, zasugerujecie jak rozwiązać problem wielu (2-4) edytorów na jednej stronie tak by to wyglądało ładnie i funkcjonalnie - a nie po prostu wrzucone jeden pod drugim i wszystkie na raz wyświetlane?


P.S. Poniżej wklejam kod HTML na którym robiłem testy, zarówno jquery ui oraz ckeditor jest nie zmieniany praktycznie na żywca wrzucony z przykładów.
Więc tutaj jakieś moje modyfikacje w panelu nie są przyczyną takiego zachowania.

  1. <script type="text/javascript" src="../application/js/jquery-1.4.2.js"></script>
  2. <script type="text/javascript" src="../application/js/jquery-ui-1.8.custom.min.js"></script>
  3. <script type="text/javascript" src="../application/libraries/ckeditor_3.2.1/ckeditor/ckeditor.js"></script>
  4. <link rel="stylesheet" type="text/css" href="../application/css/jquery_ui/base/jquery.ui.all.css" />
  5.  
  6. <script type="text/javascript">
  7. $(function() {
  8. $("#accordion").accordion();
  9. });
  10. </script>
  11. </head>
  12.  
  13. <div id="accordion">
  14. <h3><a href="#">Section 1</a></h3>
  15. <div>
  16. <textarea cols="80" id="editor_kama" name="editor_kama" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  17. <script type="text/javascript">
  18. //<![CDATA[
  19. CKEDITOR.replace( 'editor_kama',
  20. {
  21. skin : 'kama'
  22. });
  23.  
  24. //]]>
  25. </script>
  26. </div>
  27. <h3><a href="#">Section 2</a></h3>
  28. <div>
  29. <p>
  30. Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
  31. purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
  32. velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
  33. suscipit faucibus urna.
  34. </p>
  35. </div>
  36. <h3><a href="#">Section 3</a></h3>
  37. <div>
  38. <p>
  39. Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
  40. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
  41. ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
  42. lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
  43. </p>
  44. <ul>
  45. <li>List item one</li>
  46. <li>List item two</li>
  47. <li>List item three</li>
  48. </ul>
  49. </div>
  50. <h3><a href="#">Section 4</a></h3>
  51. <div>
  52. <p>
  53. Cras dictum. Pellentesque habitant morbi tristique senectus et netus
  54. et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
  55. faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
  56. mauris vel est.
  57. </p>
  58. <p>
  59. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
  60. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
  61. inceptos himenaeos.
  62. </p>
  63. </div>
  64. </div>
  65.  
  66. </body>
  67. </html>
  68.  
  69.  


Pozdro
Hary