Hilfe bei WYSIWYG Editor

M

minifuzi

Mitglied
Hallo @ all

Ich habe ein Tut über einen online Editor gefunden und ich wollte diesen jetzt mal ein bisschen erweitern da ich aber gar kein Javascript kann wollte ich euch fragen ob ihr mir helfen könntet .Ich wollte eigentlich 2 sachen hinzufügen (Tabellen machen, popup wo Bilder upload und bild in Feld einfügen ).Hoffe ihr könnt mir helfen

Hier die Quellcode:
Code: 
<html>
<head>
<title>WYSIWYG</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
a:link {
	text-decoration: none;
	color: #333333;
}
a:visited {
	text-decoration: none;
	color: #333333;
}
a:hover {
	text-decoration: none;
	color: #999999;
}
a:active {
	text-decoration: none;
	color: #333333;
}
-->
</style></head>
<body>
<script language="JavaScript" type="text/javascript" src="editor.js"></script>
<table width="750">
<form action="form.php" name="edit" method="POST" id="edit" onsubmit="return submitForm();">
<tr>
<td><a href="javascript:editorCommand('content', 'bold', '')" ><img class="rteImage" src="images/bold.gif" width="25" height="24" alt="Bold" title="Bold"></a></td>

<td><a href="javascript:editorCommand('content', 'underline', '')" ><img class="rteImage" src="images/underline.gif" width="25" height="24" alt="Underline" title="Underline"></a></td>

<td><a href="javascript:editorCommand('content', 'italic', '')" ><img class="rteImage" src="images/italic.gif" width="25" height="24" alt="Italic" title="Italic"></a></td>

<td><a href="javascript:editorCommand('content', 'justifyleft', '')" ><img class="rteImage" src="images/j_left.gif" width="25" height="24" alt="Align Left" title="Align Left"></a></td>

<td><a href="javascript:editorCommand('content', 'justifycenter', '')" ><img class="rteImage" src="images/j_center.gif" width="25" height="24" alt="Align Center" title="Align Center"></a></td>

<td><a href="javascript:editorCommand('content', 'justifyright', '')" ><img class="rteImage" src="images/j_right.gif" width="25" height="24" alt="Align Right" title="Align Right"></a></td>

<td><a href="javascript:editorCommand('content', 'undo', '')" ><img class="rteImage" src="images/undo.gif" width="25" height="24" alt="Undo" title="Undo"></a></td>

<td><a href="javascript:editorCommand('content', 'redo', '')" ><img class="rteImage" src="images/redo.gif" width="25" height="24" alt="Redo" title="Redo"></a></td>

<td width="100%" align="left"></td>

</tr>
<tr>
<td colspan="12">
<script language="JavaScript" type="text/javascript">
<!--
function submitForm() {
	updateEditor('content');
	//alert("content = " + document.edit.hiddencontent.value);
	return true;
}

initiateEditor();
//-->
</script> 
<script language="JavaScript" type="text/javascript">
displayEditor('content', ' ', 600, 300);
//-->
</script>
</td>
</tr>
<tr><td colspan="12"><input type="submit" name="Submit" value="Senden"> </td></tr>
</form>
</table>

</body>
</html>

und hier die editor.js

Code: 
//Als erstes ein paar Variablen

var isEditable= false;
var isIE;
var isGecko;
var isSafari;
var isKonqueror;

function initiateEditor() {
//Es wird getested welcher Browser benutzt wird!
var browser = navigator.userAgent.toLowerCase();
isIE = ((browser .indexOf("msie") != -1) && (browser .indexOf("opera") == -1) && (browser .indexOf("webtv") == -1));
isGecko = (browser .indexOf("gecko") != -1);
isSafari = (browser .indexOf("safari") != -1);
isKonqueror = (browser.indexOf("konqueror") != -1);

//Wenn der Browser nicht Safari oder Konqueror ist, geht er in DesignMode.
if (document.getElementById && document.designMode && !isSafari && !isKonqueror) {
   isEditable= true;
}
}


//Das ist die Designer Funktion, welche den DesignMode anschaltet und den Default Text in die TextArea schreibt
function designer(editor, html) {
     var mainContent= "<html id=" + editor + "><head></head><body>" + html + "</body></html>" ;
     var edit = document.getElementById(editor).contentWindow.document;
//schreib in die Textarea
      edit.write(mainContent);
//DesignMode an
      edit.designMode =  "On" ;
      document.getElementById(content).contentDocument.designMode = "on";
}



//Javascript Funktion dislpayEditor wird die Textarea erstellen.
function displayEditor(editor, html, width, height) {
   if(isEditable){
       document.writeln('<iframe id="' + editor + '" name="' + editor + '" width="' + width + 'px" height="' + height + 'px"></iframe>');
//Macht ein HiddenField, wo alles gespeichert wird, was getippt wird.
       document.writeln('<input type="hidden" id="hidden' + editor + '" name="hidden' + editor + '" value="">');
//Packt den Code als HTML in den Hiddenbereich
      document.getElementById('hidden' + editor).value = html;
//ruft designer Funktion
      designer(editor, html);
   }else{
     document.writeln('<textarea name="' + editor + '" id="' + editor + '" cols="39" rows="10">' + html + '</textarea>');
   }
}




function editorCommand(editor, command, option) {
// Content der Textarea in Mainfield
    var mainField;
    mainField = document.getElementById(editor).contentWindow;
// Setzen es in Focus und rufen Funktion execCommand auf
   try {
          mainField.focus();
          mainField.document.execCommand(command, false, option);
          mainField.focus();
    } catch (e) { }
}

function updateEditor(editor) {
    if (!isEditable) return;
//Aktualisieren von HiddenField
    var hiddenField = document.getElementById('hidden' + editor);
    if (hiddenField.value == null) hiddenField.value = "";
        hiddenField.value = document.getElementById(editor).contentWindow.document.body.innerHTML;
 
Zuletzt bearbeitet:
Eine Frage: kannst du zufällig den Link des Tutorials hier hineinstellen, es würde mich echt interessieren, weil ich nämlich auch so etwas machen will.

Sorry, dass ich dir nicht weiterhelfen kan....
 
Ist das noch aktuell?
Hört sich aber eher nach etwas an, wozu man php braucht. Zumindest hab ich nicht ganz verstanden, was du machen willst (by_the_way: js ist ned schwer!)
 
Easy! Ich habe in JS zwar keine Know-How, aber ich habe mir mit meinen "Kenntnissen" :-) & :google: einen WYSIWYG-Editor mit JS und PHP (Php war kein Problem weil ich php ja kann... Aber ich kann dir mein script ja mal per mail schicken
Greez... Andulus
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück