Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript]Mały edytor WYSIWYG
adrianozo
post
Post #1





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

Witam.
Mam problem, ponieważ nie wiem jak zrobić taki mały edytor. Chodzi mi o to, że gdy kliknę w literkę b to automatycznie pokaże mi się kod [b.][./b](bez kropek) w polu tekstowym. Wiem jedynie, że muszę skorzystać z JavaScript, a konkretniej z getElementById.
Tylko nie wiem co z tym dalej zrobić.
Mógłbym prosić o pomoc?
Z góry dziękuje smile.gif


--------------------
http://www.nportfolio.pl
Go to the top of the page
+Quote Post
thek
post
Post #2





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
Prosta funkcja do prostego tagowania. Podpina sie ją pod guzik i oznacza ID pola, którego ma tyczyć oraz wpisywany ciąg znaków. ostatecznie więc wygląda to tak:
[HTML] pobierz, plaintext 
  1. <input type="button" value="Podkreślenie" onclick="putTag('textarea', '[.u]', '[/.u]')" />
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1. function putTag(field, strBefore, strAfter) {
  2.    element = document.getElementById(field);
  3.    element.focus();
  4.    // IE 
  5.    if (document.selection) {
  6. 	   var oRange = document.selection.createRange();
  7. 	   var numLen = oRange.text.length; 
  8. 	   oRange.text = strBefore + oRange.text + strAfter;
  9. 	   return false;
  10.    // FF i Opera
  11.    } else if (element.setSelectionRange) {
  12.       var selStart = element.selectionStart, selEnd = element.selectionEnd;
  13. 			var oldScrollTop = element.scrollTop;
  14.       oRange = element.value.substring(selStart, selEnd);
  15.       element.value = element.value.substring(0, selStart) + strBefore + oRange + strAfter + element.value.substring(selEnd);
  16.       element.setSelectionRange(selStart + strBefore.length, selEnd + strBefore.length);
  17. 			element.scrollTop = oldScrollTop;      
  18.       element.focus();
  19.    } else {
  20. 			var oldScrollTop = element.scrollTop;
  21.       element.value += strBefore + strAfter;
  22. 			element.scrollTop = oldScrollTop;      
  23.       element.focus();
  24. 	}
  25. }
[JAVASCRIPT] pobierz, plaintext


Ten post edytował thek 28.02.2010, 18:39:15


--------------------
Najpierw był manual... Jeśli tam nie zawarto słów mądrości to zapytaj wszechwiedzącego Google zadając mu własciwe pytania. A jeśli i on milczy to Twój problem nie istnieje :D
Go to the top of the page
+Quote Post
adrianozo
post
Post #3





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

Dlaczego ta funkcja jest taka długa? I czy to tylko jest do [u.]?


--------------------
http://www.nportfolio.pl
Go to the top of the page
+Quote Post
Sueroski
post
Post #4





Grupa: Zarejestrowani
Postów: 41
Pomógł: 0
Dołączył: 19.11.2008

Ostrzeżenie: (0%)
-----

Nie, to jest do każdego tagu. Analogicznie dla na <b>:
Kod
<input type="button" value="Podkreślenie" onclick="putTag('textarea', '[.b]', '[/.b]')" />


Ten post edytował Sueroski 28.02.2010, 18:52:44
Go to the top of the page
+Quote Post
thek
post
Post #5





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
Funkcja ma być prosta, ale nie prostacka winksmiley.jpg Jest uniwersalna byś mógł tam kłaść co chcesz za znaczki. strBefore to tag otwierający, strAfter to tag zamykający. Poza tym jest to długie bo działa z zaznaczonym tekstem.Jeśli myszką zaznaczysz jakiś kawałek tekstu, to znaczniki obejmą tylko ten tekst, a nie jak wiele skryptów od tego krótszych, wrzucą tylko tagi na koniec smile.gif

No i stąd mogę potem robić takie coś jak osobny guzik od podkreślenia, osobny od pogrubienia i osobny od kursywy.

EdiT: Dodam, że to i tak ciut obcięta wersja, bo w pełniejszej postaci, dłuższej o może 10 linijek, wrzuciłem także tworzenie list numerowanych i nienumerowanych, gdzie automatycznie tworzył sobie kolejne podpunkty listy poprzez wychwycenie znaku przejścia do nowej linii.

Ten post edytował thek 28.02.2010, 21:20:57


--------------------
Najpierw był manual... Jeśli tam nie zawarto słów mądrości to zapytaj wszechwiedzącego Google zadając mu własciwe pytania. A jeśli i on milczy to Twój problem nie istnieje :D
Go to the top of the page
+Quote Post
user767
post
Post #6





Grupa: Zarejestrowani
Postów: 178
Pomógł: 5
Dołączył: 13.09.2010

Ostrzeżenie: (40%)
XX---

Ja dodam coś, co znalazłem w sieci, a szukałem niecałe 30 minut:

js
[PHP] pobierz, plaintext 
  1. var Editor;
  2.  
  3. function Format(action)
  4. {
  5. 	Editor.execCommand(action, false, null);
  6. }
  7.  
  8. function Colour(colour)
  9. {		
  10. 	Editor.execCommand("forecolor",false, colour);
  11. }
  12.  
  13. window.onload = function()
  14. {
  15. 	Editor = document.getElementById('textbox').contentWindow.document;
  16. 	Editor.designMode = "on";
  17. 	document.forms[0].onsubmit = function()
  18. 	{
  19. 		var text = document.getElementById('text');
  20. 		text.value = Editor.body.innerHTML;
  21. 	}
  22. }
  23.  
[PHP] pobierz, plaintext


html
[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 	<title>Simple Javascript WYSIWYG Editor</title>
  4. 		<script language="Javascript" src="editor.js"></script>
  5. 	</head>
  6. 	<body>
  7. 		<form method="POST">
  8. 			<div>
  9. 				<input type="button" onclick="Colour('Green')" style="background-color:Green;" />
  10. 				<input type="button" onclick="Colour('Red')" style="background-color:Red;" />
  11. 				<input type="button" onclick="Colour('Blue')" style="background-color:Blue;" />
  12. 				<input type="button" onclick="Colour('Black')" style="background-color:Black;" />
  13. 				<input type="button" onclick="Format('bold')" value="B" />
  14. 				<input type="button" onclick="Format('italic')" value="I" />
  15. 				<input type="button" onclick="Format('Underline')" value="U" />
  16. 				<input type="button" onclick="Format('justifycenter')" value="C" />
  17. 				<input type="button" onclick="Format('justifyleft')" value="L" />
  18. 				<input type="button" onclick="Format('justifyright')" value="R" /><br/>
  19. 				<iframe id="textbox" style="width:300px; height:150px"></iframe><br/>
  20. 				<input type="submit" value="Go" />
  21. 				<input type="hidden" id="text" name="text" />
  22. 			</div>
  23. 		</form>
  24. 	</body>
  25. </html>
  26.  
[HTML] pobierz, plaintext


z http://cstruter.com/blog/45
i działa

editŁ
http://msdn.microsoft.com/en-us/library/aa...fice.11%29.aspx execCommand Method

Ten post edytował user767 7.11.2010, 21:38:42
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 14:59
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn