javascript - wysiwyg virker ikke som den skal. - Udvikleren.dk

Tags: javascript

<< < 1 2 3 4 > >>

Bruger #13068 @ 19.04.09 00:51

Som overskriften siger så virker min wysiwyg ikke, man kan godt skrive i den, men man kan ikke lave fed, kursiv, Understreget og forskellige tekst størelser, min koder er:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<title>WYSIWYG Editor</title>
<script type="text/JavaScript">
var editor;
	function init()
	{
	editor = document.getElementById("editor");
	editor.contentWindow.document.designMode = "On";
	}
	function txtCommand(command, value)
	{
	editor.contentWindow.document.execCommand(command, false, value);
	}
	function NormalMode()
	{
	editor.contentWindow.document.body.innerHTML = document.getElementById("code").value;
	document.getElementById("editor").style.display = "inline";
	document.getElementById("code").style.display = "none";
	}
	function CodeMode()
	{
	document.getElementById("code").value = editor.contentWindow.document.body.innerHTML;
	document.getElementById("editor").style.display = "none";
	document.getElementById("code").style.display = "inline";
	}
</script>
</head>
<body onload="init();">
<select onchange="txtCommand("FontSize", this.options[this.selectedIndex].value);">
<option value="1">10</option>
<option value="2">12</option>
<option value="3">14</option>
<option value="4">18</option>
<option value="5">24</option>
<option value="6">32</option>
<option value="7">48</option>
</select>
<button onclick="txtCommand("Bold", "");"><b>B</b></button>
<button onclick="txtCommand("Italic", "");"><i>I</i></button>
<button onclick="txtCommand("Underline", "");"><u>U</u></button><br />
<iframe name="editor" id="editor"></iframe>
<textarea id="code"></textarea>
<br />
<input type="button" value="Kildekode" onclick="CodeMode();" />
<input type="button" value="Design" onclick="NormalMode();" />
</body>
</html>

Og her er et link til siden med problemet http://itgeeks.wep.dk/567test567/admin/Editor.html
Hvad gør jeg forkert?

33 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #11328 @ 19.04.09 16:00

1.323

@Jacob:
http://www.w3schools.com/css/pr_dim_line-height.asp

@Andreas: Det er meget få editors, der har brug for videre udvikling. Og kode systemet er så avanceret opbygget at det, for begyndere, er meget svært at forstå. Dog kan det altså også være dejligt at starte fra point zero. Man får en "stoltheds-følelse".. Eller det gør jeg i hvert fald. Og oven i det ved du også præcis hvordan dit API ser ud, og hvordan man bruger det.

Bruger #13669 @ 19.04.09 16:49

@Andreas: Det er meget få editors, der har brug for videre udvikling. Og kode systemet er så avanceret opbygget at det, for begyndere, er meget svært at forstå. Dog kan det altså også være dejligt at starte fra point zero. Man får en "stoltheds-følelse".. Eller det gør jeg i hvert fald. Og oven i det ved du også præcis hvordan dit API ser ud, og hvordan man bruger det.

Så har det jo intet med dovenskab at gøre mere, og stolrheds-følelse er godt, men det har intet at gøre med at fremme udviklingen.

Bruger #11328 @ 19.04.09 17:15

1.323

Andreas: Udvikling bliver skabt ved nytænkning, så langt håber jeg vi kan være enige. Nytænkning bliver skabt af kompetence, fantasi og viden. Hvis du ikke har viden omkring faget, kan du heller ikke udføre den. Derfor er træning vigtigt i udvikling. Og at copy-paste FCKEditor kan umuligt være god træning. Desuden er der kompetencen, og den får du altså kun ved at have erfaringer på faget. Og du kan, igen, ikke have erfaringer omkring emnet hvis du aldrig selv har lavet det, men bare har downloadet noget andre har lavet.

Bruger #13669 @ 19.04.09 17:40

Jeg siger jo lige netop, at det er en god måde at få træning på, men vis man rent faktisk skal lave et produkt(udvikling), er det smartest ikke at opfinde den dybe tallerken 2 gange.

Det jeg prøver at sige er, at der ikke er noget "dovent" i at bruge en WYSIWYG editor(eller for den sags skyld, alle mulige andre ting) som nogle andre har lavet.

Bruger #13068 @ 19.04.09 19:11

@Jakob: kan du hjælpe mig med at sætte det fra dit link ind i min kode?

Bruger #11328 @ 20.04.09 07:54

1.323

Ændr:

HTML kode

 <iframe name="editor" id="editor"></iframe>

Til:

HTML kode

 <iframe name="editor" id="editor" style="line-height: 12"></iframe>

Bruger #13068 @ 20.04.09 14:38

Jeg skal også bruge det til min side

Bruger #13068 @ 20.04.09 21:56

@Jakob: Det du skrev virker desvære ikke min kode er indtil videre:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
 <link rel="stylesheet" type="text/css" href="http://itgeeks.wep.dk/567test567/style.css" media="screen"/>
 <title>WYSIWYG Editor</title>
 <script type="text/JavaScript">
 var editor;
     function init()
     {
     editor = document.getElementById("editor");
     editor.contentWindow.document.designMode = "On";
	 document.getElementById("code").style.display = "none";
	 document.getElementById("editor").object.style.lineHeight="1px"
     }
	 function changeLineHeight()
	 {
	 document.getElementById("editor").style.lineHeight="1";
	 }
     function txtCommand(command, value)
     {
     editor.contentWindow.document.execCommand(command, false, value);
     }
     function NormalMode()
     {
     editor.contentWindow.document.body.innerHTML = document.getElementById("code").value;
     document.getElementById("editor").style.display = "inline";
     document.getElementById("code").style.display = "none";
	 document.getElementById("editor").object.style.lineHeight="1px"
     }
     function CodeMode()
     {
     document.getElementById("code").value = editor.contentWindow.document.body.innerHTML;
     document.getElementById("editor").style.display = "none";
     document.getElementById("code").style.display = "inline";
     }
 </script>
 </head>
 <body onload="init();">
 <body onload="changeLineHeight();">
 <select onchange="txtCommand('FontSize', this.options[this.selectedIndex].value);">
 <option value="1">10</option>
 <option value="2">12</option>
 <option value="3">14</option>
 <option value="4">18</option>
 <option value="5">24</option>
 <option value="6">32</option>
 <option value="7">48</option>
 </select>
 <button onclick="txtCommand('Bold', '');"><b>B</b></button>
 <button onclick="txtCommand('Italic', '');"><i>I</i></button>
 <button onclick="txtCommand('Underline', '');"><u>U</u></button><br />
 <iframe name="editor" id="editor" style="line-height: 12"></iframe>
 <textarea name="editor" id="editor""></textarea>
 <textarea id="code""></textarea>
 <br/>
 <input type="button" value="Kildekode" onclick="CodeMode();" />
 <input type="button" value="Design" onclick="NormalMode();" />
 </body>
 </html>

Bruger #11328 @ 20.04.09 22:55

1.323

Hvorfor har du skrevet:
document.getElementById("editor").object.style.lineHeight="1px"
??
document.getElementById("editor").style.lineHeight="1px"
burder være nok...

Bruger #13068 @ 21.04.09 15:44

Det virker stadig ikke

min kode er nu:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
 <link rel="stylesheet" type="text/css" href="http://itgeeks.wep.dk/567test567/style.css" media="screen"/>
 <title>WYSIWYG Editor</title>
 <script type="text/JavaScript">
 var editor;
     function init()
     {
     editor = document.getElementById("editor");
     editor.contentWindow.document.designMode = "On";
	 document.getElementById("code").style.display = "none";
	 document.getElementById("editor").style.lineHeight="1px"
     }
	 function changeLineHeight()
	 {
	 document.getElementById("editor").style.lineHeight="1";
	 }
     function txtCommand(command, value)
     {
     editor.contentWindow.document.execCommand(command, false, value);
     }
     function NormalMode()
     {
     editor.contentWindow.document.body.innerHTML = document.getElementById("code").value;
     document.getElementById("editor").style.display = "inline";
     document.getElementById("code").style.display = "none";
	 document.getElementById("editor").style.lineHeight="1px"

     }
     function CodeMode()
     {
     document.getElementById("code").value = editor.contentWindow.document.body.innerHTML;
     document.getElementById("editor").style.display = "none";
     document.getElementById("code").style.display = "inline";
     }
 </script>
 </head>
 <body onload="init();">
 <body onload="changeLineHeight();">
 <select onchange="txtCommand('FontSize', this.options[this.selectedIndex].value);">
 <option value="1">10</option>
 <option value="2">12</option>
 <option value="3">14</option>
 <option value="4">18</option>
 <option value="5">24</option>
 <option value="6">32</option>
 <option value="7">48</option>
 </select>
 <button onclick="txtCommand('Bold', '');"><b>B</b></button>
 <button onclick="txtCommand('Italic', '');"><i>I</i></button>
 <button onclick="txtCommand('Underline', '');"><u>U</u></button><br />
 <iframe name="editor" id="editor" style="line-height: 12"></iframe>
 <textarea name="editor" id="editor""></textarea>
 <textarea id="code""></textarea>
 <br/>
 <input type="button" value="Kildekode" onclick="CodeMode();" />
 <input type="button" value="Design" onclick="NormalMode();" />
 </body>
 </html>

<< < 1 2 3 4 > >>

wysiwyg virker ikke som den skal.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler