4. WYSIWYG - Browserkompatibilität

WYSIWYG - Browserkompatibilität

  • K

    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:

    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!

    0
  • K

    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:

    <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>
    0
Anmelden zum Antworten