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 (IMG:style_emoticons/default/smile.gif)
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
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.]?
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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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
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
2 Użytkowników czyta ten temat (2 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: 22.08.2025 - 20:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn