| Autor |
Nachricht |
Kóyaánasqatsi
Mitglied
Benutzerprofil
Anmeldungsdatum: 03.10.2008
Beiträge: 3176
|
Kóyaánasqatsi Mitglied
18:26:23 15.05.2012 Titel: |
WYSIWYG - Browserkompatibilität |
Zitieren |
Hallo,
vorweg: Ich beschäftige mich noch nicht lange mit JavaScript, geschweige denn Ajax oder was es auch sonst noch alles gibt.
Und zwar würde ich gerne einen WYSIWYG-Text-Editor für ein kleines CMS bauen. Allerdings liefert Google nur dürftige Ergebnisse, bei der Suche nach "WYSIWYG" in Verbindung mit "JavaScript" + "Tutorial". Nach langem Suchen also, bin ich tatsächlich doch noch auf funktionierenden Code gestoßen:
http://corpocrat.com/2008/07/22/a-simple-wysiwyg-editor-in-javascript/
Super! Funktioniert 1a, allerdings im Internet Explorer nicht. Mit anderen Browsern habe ich mich gar nicht erst getraut zu testen.
Nun denn, ich weiß nicht so ganz, wie man das Problem beheben könnte. Es verwirrt mich ziemlich, dass es so viele WYSIWYG-Editoren (80% der Foren) gibt, allerdings keinen einzigen, perfekt funktionierenden Codeschnipsel.
Naja, zu meiner eigentlichen Frage: Auf der Seite ist ja nun angemerkt, dass der Code nach leichter Veränderung, auch im Firefox funktioniert:
| Zitat: | | and for it to work in firefox it must be called with getElementbyID from body onload() else it wont work in the firefox browser. Refer to the mozilla firefox documentation for more information. |
Allerdings funktioniert er mit der beschriebenen Methode weder im IE, noch im FF.
Ich bin langsam wirklich am verzweifeln. Notfalls wäre ich auch nur für passende Suchbegriffe für Google dankbar. Danke im voraus! |
_________________
createch-web www.wie-nehme-ich-zu.de
|
|
|
Kóyaánasqatsi
Mitglied
Benutzerprofil
Anmeldungsdatum: 03.10.2008
Beiträge: 3176
|
|
Kóyaánasqatsi Mitglied
18:57:02 15.05.2012 Titel: |
|
Zitieren |
Hallo,
das Problem ist soweit gelöst. Folgender Code ist kompatibel mit Internet Explorer, Firefox und Google Chrome. Weitere Browser kann ich derzeit leider nicht testen, werde ich aber nachtragen, sofern ich das nicht vergesse.
Code:
| Code: | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112 | <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
//inhalt des iframes auf das textfeld 'inhalt_editor' kopieren, damit man dieses durch ein formular versenden kann
function inhalt_kopieren() {
if(document.all) {
//IE
html_code = editor.document.body.innerHTML;
document.getElementById('inhalt_editor').value = html_code;
}
else {
//ff
html_code = frames['editor'].document.getElementsByTagName('body')[0].innerHTML;
document.getElementById('inhalt_editor').value = html_code;
}
}
function init() {
if (document.all) { //IE
frames.editor.document.designMode = "On";
}
else { //Mozilla
document.getElementById("editor").contentDocument.designMode = "on";
}
}
//Befehl im Editor (iFrame) ausfürhen
function runCommand(theCommand) {
var theEditor;
if (document.all) { //IE
frames.editor.document.designMode = "On";
frames["editor"].document.execCommand(theCommand, false, ';')
}
else { //Mozilla
document.getElementById("editor").contentDocument.designMode = "on";
document.getElementById("editor").contentWindow.document.execCommand(theCommand, false, ';')
}
}
//Ansichtsmodus 1 = Normal (rich text) ; 2 = html code
var viewMode = 1;
// Other code exists here
function view_source() {
if(document.all) {
//ie
viewsource_ie();
} else {
viewsource_firefox();
}
}
//Quelltext des iframes im IE umwandeln
function viewsource_ie() {
if(viewMode == 1) {
iHTML = editor.document.body.innerHTML;
editor.document.body.innerText = iHTML;
editor.focus();
viewMode = 2;
} else {
iText = editor.document.body.innerText;
editor.document.body.innerHTML = iText;
editor.focus();
viewMode = 1; // WYSIWYG
}
}
//Quelltext des iframes im Firefox umwandeln
function viewsource_firefox() {
var html;
if (viewMode == 1) {
html = document.createTextNode(document.getElementById('editor').contentWindow.document.body.innerHTML);
document.getElementById('editor').contentWindow.document.body.innerHTML = "";
html = document.getElementById('editor').contentWindow.document.importNode(html,false);
document.getElementById('editor').contentWindow.document.body.appendChild(html);
viewMode=2;
} else {
html = document.getElementById('editor').contentWindow.document.body.ownerDocument.createRange();
html.selectNodeContents(document.getElementById('editor').contentWindow.document.body);
document.getElementById('editor').contentWindow.document.body.innerHTML = html.toString();
viewMode=1;
}
}
</script>
</head>
<body onLoad="init();">
<div id="editor_menu" style="display:block">
<button type="button" onclick="runCommand('Bold');"><b>F</b></button>
<button type="button" onclick="runCommand('italic');"><i>i</i></button>
<button type="button" onclick="runCommand('underline');"><u>U</u></button>
<button type="button" onclick="runCommand('StrikeThrough');"><s>S</s></button>
</div>
<br>
<iframe name="editor" id="editor" width="400" height="500"></iframe>
<form method="post" action="" onsubmit="inhalt_kopieren();">
<input type="hidden" name="inhalt_editor" id="inhalt_editor" />
<input type="submit" name="submit_speichern" value="Seite Speichern" /><button type="button" onclick="view_source();aufklappen('editor_menu')">Quelltext anzeigen</button>
</form>
</body>
</html> | |
|
_________________
createch-web www.wie-nehme-ich-zu.de
|
|
|
|
Nächstes Thema anzeigen
Vorheriges Thema anzeigen
Sie können Beiträge in dieses Forum schreiben.
Sie können auf Beiträge in diesem Forum antworten.
Sie können Ihre Beiträge in diesem Forum nicht bearbeiten.
Sie können Ihre Beiträge in diesem Forum nicht löschen.
Sie können an Umfragen in diesem Forum nicht mitmachen.
|
|
|
|
|
Twitter
Facebook