Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
2
I am trying to create a simple simple WYSIWYG editor for my website. I found this really simple code which i really liked but the problem is, I am an absolute beginner in javascript and I don't know how to do simple things. What I want to do is very simple. First of all, here is the code:
Quote
editor.js
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;
}
}
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;
}
}
and
Quote
editor.html
<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>
<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>
The code uses an inline frame and all I want to do is to initialize the iframe with a text. For example, I want the Iframe to have "Welcome" text in it when the page loads.
I tried to use insertHTML but it didn't work. Can someone please help me with this?
Thanks
Back to top
