Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ JavaScript _ Edytor nie działa jak należy

Napisany przez: frankiejojo 21.05.2019, 17:11:18

Cześć,
Piszę formularz, w pewnym momencie ma się pojawić textarea i dobrze by było, by miała wygląd jak należy.
Program w uproszczeniu składa się z dwóch plików
wyswigStart.php i wyswig.php
WyswigStat.php wygląda następująco

  1. <http://december.com/html/4/element/html.html>
  2. <http://december.com/html/4/element/head.html>
  3. <http://december.com/html/4/element/meta.html HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">
  4. <http://december.com/html/4/element/script.html src="http://code.jquery.com/jquery-2.1.1.min.js"></http://december.com/html/4/element/script.html>
  5. <http://december.com/html/4/element/script.html src="nicEdit/nicEdit.js"></http://december.com/html/4/element/script.html>
  6. <http://december.com/html/4/element/script.html type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</http://december.com/html/4/element/script.html>
  7. <http://december.com/html/4/element/script.html type="text/javascript">
  8. function dodawarka(){
  9. $.get( "wyswig.php", {dane:$("#dane").val()
  10. } ).done(function( data ) {
  11. $("#wyniki").html(data);
  12. });
  13. }
  14. </http://december.com/html/4/element/script.html>
  15. </http://december.com/html/4/element/head.html>
  16. <http://december.com/html/4/element/body.html>
  17. <http://december.com/html/4/element/button.html class='button buttonPanel' onclick='dodawarka()'>Dodaj ofertę</http://december.com/html/4/element/button.html>
  18. <http://december.com/html/4/element/div.html id='wyniki'></http://december.com/html/4/element/div.html>
  19. opis: <http://december.com/html/4/element/textarea.html width="300px"></http://december.com/html/4/element/textarea.html>
  20. </http://december.com/html/4/element/body.html>
  21. </http://december.com/html/4/element/html.html>


Textarea w powyższym pliku została umieszczona tylko po to by sprawdzić czy nicEdit działa - wykasowanie jej niczego nie zmienia w działaniu programu.

i plik wyswig.php
  1. opis: <http://december.com/html/4/element/textarea.html width="300px"></http://december.com/html/4/element/textarea.html>


i teraz cały problem polega na tym, że textarea w pliku wyswig niczym się nie różni od zwykłego inputa (poza wielkością). Zwyczajnie nie widzi tego nicEdit.
Zmiana miejsca wklejenia nicEdit (script napisany kursywą - przeniesienie tych linijek do pliku wyswig.php) zmienia tylko tyle, że osobno uruchomiony program wyswig.php wyświetla się z ładną textareą natomiast jeżeli ten plik zostanie uruchomiony za pomocą funkcji z pliku wyswigStart to "jest zwykły input".

Jak sprawić by pomiędzy div=wyniki wyświetlała się ładna textarea?
Nie mam pomysłu.

Napisany przez: trueblue 21.05.2019, 17:14:04

Może zamiast przestarzałego nicEdit zastosuj np. CKEditor?

Napisany przez: frankiejojo 21.05.2019, 17:44:16

Zmiana edytora niczego nie zmienia.
Z CKEdirtor:

  1. <http://december.com/html/4/element/html.html>
  2. <http://december.com/html/4/element/head.html>
  3. <http://december.com/html/4/element/meta.html HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">
  4. <http://december.com/html/4/element/script.html src="http://code.jquery.com/jquery-2.1.1.min.js"></http://december.com/html/4/element/script.html>
  5. <http://december.com/html/4/element/script.html type="text/javascript">
  6. function dodawarka(){
  7. $.get( "wyswig.php", {dane:$("#dane").val()
  8. } ).done(function( data ) {
  9. $("#wyniki").html(data);
  10. });
  11. }
  12. </http://december.com/html/4/element/script.html>
  13. </http://december.com/html/4/element/head.html>
  14. <http://december.com/html/4/element/body.html>
  15. <http://december.com/html/4/element/button.html class='button buttonPanel' onclick='dodawarka()'>Dodaj ofertę</http://december.com/html/4/element/button.html>
  16. <http://december.com/html/4/element/div.html id='wyniki'></http://december.com/html/4/element/div.html>
  17. </http://december.com/html/4/element/body.html>
  18. </http://december.com/html/4/element/html.html>


i wyswig
  1. <!DOCTYPE html>
  2. <http://december.com/html/4/element/html.html>
  3. <http://december.com/html/4/element/head.html>
  4. <http://december.com/html/4/element/meta.html charset="utf-8">
  5. <http://december.com/html/4/element/title.html>CKEditor</http://december.com/html/4/element/title.html>
  6. <http://december.com/html/4/element/script.html src="https://cdn.ckeditor.com/4.11.4/standard/ckeditor.js"></http://december.com/html/4/element/script.html>
  7. </http://december.com/html/4/element/head.html>
  8. <http://december.com/html/4/element/body.html>
  9. <http://december.com/html/4/element/textarea.html name="editor1"></http://december.com/html/4/element/textarea.html>
  10. <http://december.com/html/4/element/script.html>
  11. CKEDITOR.replace( 'editor1' );
  12. </http://december.com/html/4/element/script.html>
  13. </http://december.com/html/4/element/body.html>
  14. </http://december.com/html/4/element/html.html>


Sam wyswig działa, razem nie chcą...

Napisany przez: trueblue 21.05.2019, 18:03:42

Albo nie rozumiem co chcesz zrobić, albo dobrze rozumiem, ale to co robisz jest kompletnie bezsensowne.
Po to aby dołączyć nowy edytor wczytujesz kawałek kodu HTML Ajax'em? To jak układanka domino z 250 tys. klocków po to aby włączyć światło.
Jeszcze w pierwszym przykładzie można na to przymknąć oko, ale w drugim chcesz wstawić element <html> wraz z DOCTYPE do <div>?

Na wciśnięcie przycisku powinieneś dokleić kod <textarea> do <div>, ale bez użycia Ajax.
A potem:

  1. CKEDITOR.replace( 'id_lub_nazwa_dodanego_textarea');

Napisany przez: frankiejojo 21.05.2019, 19:09:17

Do plliku wyswig.html skopiowałem przykład z instrukcji w ten sposób plik wyswig sam działał ale jak jest wywoływany ajacem to już nie.
Przyznaję CI 100% rację, że pisanie 14 linijek kodu tam gdzie można jedną jest bez sensu.
Dzięki za rady.
Zadziałało:)

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)