Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML][Jquery]Jquery Tinymce
Forum PHP.pl > Forum > Przedszkole
arpi
Cześć, borykam sie nad tematem kilka godzin, przeszukałem wszysktie fora i google i nie znalazłem rozwiązania.
Otóż mam problem aby za pomocą Jquery dostać się do pola textarea, które jest obsadzone Tinymce.
Tinymce tworzy dodatkowa ramke IFrame w kodzie i Jquery coś nie może się dostać do drzewa DOM w ramce.

kod:
  1. <script src="includes/jquery-3.7.1.js"></script>
  2. <script src="https://cdn.tiny.cloud/1/XXXXXXXXXXXX/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
  3. <script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@1/dist/tinymce-jquery.min.js" crossorigin="anonymous"></script>
  4. tinymce.init({
  5. selector: 'textarea.tiny', // change this value according to the HTML
  6. height:200,
  7. plugins: ['lists', 'code' ],
  8. toolbar: 'undo bold bullist code',
  9. menubar: false,
  10. invalid_elements: 'div,span,p,table',
  11. setup: function (e) {
  12. e.on('change', function () {
  13. tinymce.triggerSave();
  14. })
  15. }
  16. });
  17.  
  18. $('.mce-content-body').on("change",function (e) { //.mce-content-body to jest pole które wstawia tinymce a textarea wyłącza wyswietlanie
  19. var value = $(this).val();
  20. alert(value);
  21. });
  22. </script>
  23. ....
  24. <textarea class="tiny" id="opis" name="opis">OPISopisOPIS</textarea>
  25. <input type="button" id="zapisz" name="zapisz" value="Zapisz">
  26. </form>


Co należy dopisać w kodzie aby kod jQuery widział te pola w ramce i mógł pobrać ich wartość?
Oczywiście gdy wyłączę Tinymce, z textarea mogę normalnie wyciągnąć wartość

trueblue
A w jaki celu chcesz się dostać do pola textarea?
arpi

Gdy użytkownik zmieni opis w textarea potrzebuje pobrać wartość z tego pola $('.mce-content-body') i za pomocą ajaxa zapisać w bazie mysql.
Salvation
Wszystko jest w dokumentacji: https://www.tiny.cloud/blog/how-to-get-cont...ent-in-tinymce/
arpi
Dziękuję, zrobione działa smile.gif
Wrzucam kod dla szukających rozwiązania - bo te instrukcje na stronach twórców to ciężko znaleźć

  1. <script src="includes/jquery-3.7.1.js"></script>
  2. <script src="https://cdn.tiny.cloud/1/XXXXXXXXXXXX/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
  3. <script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@1/dist/tinymce-jquery.min.js" crossorigin="anonymous"></script>
  4. tinymce.init({
  5. selector: 'textarea.tiny', // change this value according to the HTML
  6. height:200,
  7. plugins: ['lists', 'code' ],
  8. toolbar: 'undo bold bullist code',
  9. menubar: false,
  10. invalid_elements: 'div,span,p,table'
  11. });
  12.  
  13. $('input#zapisz').click(function() {
  14. var Tresc = tinymce.get("opis").getContent();
  15. alert(Tresc);
  16. });
  17. </script>
  18. ....
  19. <textarea class="tiny" id="opis" name="opis">OPISopisOPIS</textarea>
  20. <input type="button" id="zapisz" name="zapisz" value="Zapisz">
  21. </form>
  22.  
  23.  
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.