Forum PHP.pl > [JavaScript]Mały edytor WYSIWYG

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Mały edytor WYSIWYG

adrianozo

28.02.2010, 17:36:39

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

thek

28.02.2010, 18:38:50

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 
<input type="button" value="Podkreślenie" onclick="putTag('textarea', '[.u]', '[/.u]')" />
[HTML] pobierz, plaintext

[JAVASCRIPT] pobierz, plaintext 
function putTag(field, strBefore, strAfter) {
   element = document.getElementById(field);
   element.focus();
   // IE 
   if (document.selection) {
	   var oRange = document.selection.createRange();
	   var numLen = oRange.text.length; 
	   oRange.text = strBefore + oRange.text + strAfter;
	   return false;
   // FF i Opera
   } else if (element.setSelectionRange) {
      var selStart = element.selectionStart, selEnd = element.selectionEnd;
			var oldScrollTop = element.scrollTop;
      oRange = element.value.substring(selStart, selEnd);
      element.value = element.value.substring(0, selStart) + strBefore + oRange + strAfter + element.value.substring(selEnd);
      element.setSelectionRange(selStart + strBefore.length, selEnd + strBefore.length);
			element.scrollTop = oldScrollTop;      
      element.focus();
   } else {
			var oldScrollTop = element.scrollTop;
      element.value += strBefore + strAfter;
			element.scrollTop = oldScrollTop;      
      element.focus();
	}
}
[JAVASCRIPT] pobierz, plaintext

adrianozo

28.02.2010, 18:43:36

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

Sueroski

28.02.2010, 18:52:35

Nie, to jest do każdego tagu. Analogicznie dla na <b>:

Kod

thek

28.02.2010, 21:16:08

Funkcja ma być prosta, ale nie prostacka

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

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.

user767

7.11.2010, 08:43:12

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

js

[PHP] pobierz, plaintext 
var Editor;
 
function Format(action)
{
	Editor.execCommand(action, false, null);
}
 
function Colour(colour)
{		
	Editor.execCommand("forecolor",false, colour);
}
 
window.onload = function()
{
	Editor = document.getElementById('textbox').contentWindow.document;
	Editor.designMode = "on";
	document.forms[0].onsubmit = function()
	{
		var text = document.getElementById('text');
		text.value = Editor.body.innerHTML;
	}
}
 
[PHP] pobierz, plaintext

html

[HTML] pobierz, plaintext 
<html>
	<head>
	<title>Simple Javascript WYSIWYG Editor</title>
		<script language="Javascript" src="editor.js"></script>
	</head>
	<body>
		<form method="POST">
			<div>
				<input type="button" onclick="Colour('Green')" style="background-color:Green;" />
				<input type="button" onclick="Colour('Red')" style="background-color:Red;" />
				<input type="button" onclick="Colour('Blue')" style="background-color:Blue;" />
				<input type="button" onclick="Colour('Black')" style="background-color:Black;" />
				<input type="button" onclick="Format('bold')" value="B" />
				<input type="button" onclick="Format('italic')" value="I" />
				<input type="button" onclick="Format('Underline')" value="U" />
				<input type="button" onclick="Format('justifycenter')" value="C" />
				<input type="button" onclick="Format('justifyleft')" value="L" />
				<input type="button" onclick="Format('justifyright')" value="R" /><br/>
				<iframe id="textbox" style="width:300px; height:150px"></iframe><br/>
				<input type="submit" value="Go" />
				<input type="hidden" id="text" name="text" />
			</div>
		</form>
	</body>
</html>
 
[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

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.