Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: CKEditor wstawienie tekstu po Onclick
Forum PHP.pl > Forum > Po stronie przeglądarki
slawny
Witam,

napotkałem problem z którym nie mogę sobie poradzić.

Chciałbym aby po kliknięciu w link który ma podłączoną funkcję onclick, wstawiał się do textarea odpowiedni tekst.
Stworzyłem sobie funkcję i wszystko pięknie działa na textarea nie będącym ckeditorem, jak podłączę edytor to tekst się nie wstawia.
Oprócz wstawienia tekstu dopisałem fragment alert(), żeby mi zwracał zawartość (po wstawieniu) textarea i zwraca poprawną zawartość, problem w tym że jej nie wyświetla.

Proszę o pomoc.
Kshyhoo
To ma być jakieś własne formatowanie tekstu, czy chcesz wklejać jakieś fragmenty tekstu?
kajzur
I jak wywołujesz CKeditora?
slawny
@kajzur
Wywołuje normalnie.
Podłączam skrypt js i podaje id jakie nadałem textarea.

@Kshyhoo
ma to wstawiać do textarea "zmienne" , których nie chce mi się pisać za każdym razem(dużo dziwnych znaków). Stworzyłem w tym celu listę używanych zmiennych które chce wstawiać po kliknięciu w jedną z nich.
Kshyhoo
Cytat(slawny @ 15.03.2011, 09:59:41 ) *
@Kshyhoo
ma to wstawiać do textarea "zmienne" , których nie chce mi się pisać za każdym razem(dużo dziwnych znaków). Stworzyłem w tym celu listę używanych zmiennych które chce wstawiać po kliknięciu w jedną z nich.

Podaj konkrety, co chcesz osiągnąć - i luknij tu
slawny
Konkrety już napisałem ale nie możemy się zrozumieć, więc uproszczę to trochę:

Mam w aplikacji w dowolnym miejscu napis "ALA MA KOTA", jak go kliknę (obojętnie czy to będzie link czy jakieś li) chcę aby ten tekst został wstawiony do textarea będącym ckeditorem.

Tak jak pisałem wcześniej, dopóki jest to zwykłe textarea to nie ma problemu - wszystko działa.
Jak wskaże w skrypcie że ten konkretny textarea ma być edytorem to nie wstawia do niego tekstu (fizycznie go nie widać), ale musi coś się dziać bo w funkcji js która odpowiada za wstawienie dopisałem alert zawartości tej textarea i zwraca poprawnie.
Kshyhoo
OK, spłodziłem naprędce, więc wymaga sprawdzenia:
1. plik główny edytora - ckeditor.js
a). odszukać:
[JAVASCRIPT] pobierz, plaintext
  1. 'about,basicstyles,blockquote,button,clipboard,colorbutton,colordialog,contextmen
    u, elementspath,enterkey,entities,filebrowser,find,flash,font,format,forms,horizont
    alrule, htmldataprocessor,image,indent,justify,keystrokes,link,list,maximize,newpage,pag
    ebreak, pastefromword,pastetext,popup,preview,print,removeformat,resize,save,scayt,smile
    y, showblocks,sourcearea,stylescombo,table,tabletools,specialchar,tab,templates,too
    lbar, undo,wysiwygarea,wsc'
[JAVASCRIPT] pobierz, plaintext

cool.gif. dodać do kodu:
[JAVASCRIPT] pobierz, plaintext
  1. wlepki,
[JAVASCRIPT] pobierz, plaintext

c). odszukać:
[JAVASCRIPT] pobierz, plaintext
  1. i.toolbar_Full=[['Source','-','Save','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],'/',['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],'/',['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['Maximize','ShowBlocks','-','About']];
[JAVASCRIPT] pobierz, plaintext

d). dodać do kodu:
[JAVASCRIPT] pobierz, plaintext
  1. ['Wlepki'],
[JAVASCRIPT] pobierz, plaintext

2. W katalogu plugins edytora, dodać katalog wlepki.
3. W katalogu wlepki dodać plik plugin.js.
4. Do pliku plugin.js wkleić kod:
[JAVASCRIPT] pobierz, plaintext
  1. CKEDITOR.plugins.add( 'wlepki',
  2. {
  3. requires : ['richcombo'], //, 'styles' ],
  4. init : function( editor )
  5. {
  6. var config = editor.config,
  7. lang = editor.lang.format;
  8.  
  9. // Gets the list of tags from the settings.
  10. var tags = []; //new Array();
  11. //Tu wstawic wlasny tekst do wklejenia w formacie:
  12. //this.add('value', 'drop_text', 'drop_label');
  13. tags[0]=["Imię", "Imię", "Imię"];
  14. tags[1]=["Nazwisko", "Nazwisko", "Nazwisko"];
  15. tags[2]=["E-mail", "E-mail", "E-mail"];
  16. tags[3]=["Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", "Lorem ipsum", "Lorem ipsum"];
  17.  
  18. // Create style objects for all defined styles.
  19.  
  20. editor.ui.addRichCombo( 'Wlepki',
  21. {
  22. label : "Wlepki",
  23. title : "Wstaw tekst",
  24. voiceLabel : "Wstaw tekst",
  25. className : 'cke_format',
  26. multiSelect : false,
  27.  
  28. panel :
  29. {
  30. css : [ config.contentsCss, CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],
  31. voiceLabel : lang.panelVoiceLabel
  32. },
  33.  
  34. init : function()
  35. {
  36. this.startGroup( "Wlepki" );
  37. //this.add('value', 'drop_text', 'drop_label');
  38. for (var this_tag in tags){
  39. this.add(tags[this_tag][0], tags[this_tag][1], tags[this_tag][2]);
  40. }
  41. },
  42.  
  43. onClick : function( value )
  44. {
  45. editor.focus();
  46. editor.fire( 'saveSnapshot' );
  47. editor.insertHtml(value);
  48. editor.fire( 'saveSnapshot' );
  49. }
  50. });
  51. }
  52. });
[JAVASCRIPT] pobierz, plaintext

I to tyle.
Jak widać, można wstawiać dowolny tekst w formacie: ["wklejony tekst", "tekst do kliknięcia", "opis w chmurce"]:
[JAVASCRIPT] pobierz, plaintext
  1. tags[0]=["Imię", "Imię", "Imię"];
  2. tags[1]=["Nazwisko", "Nazwisko", "Nazwisko"];
  3. tags[2]=["E-mail", "E-mail", "E-mail"];
  4. tags[3]=["Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", "Lorem ipsum", "Lorem ipsum"]
[JAVASCRIPT] pobierz, plaintext

PS. Uwaga na wielkość znaków przy edycji!
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.