WYSIWYG Editor Using an IFrame

1 post Page 1 of 1
Post Reply
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am
WYSIWYG Editor Using an IFrame
mikethedj4
Post Options:
Quote
Give it a try at - http://jsbin.com/ESUvUdef/1/edit

Now I'm using an iFrame for this particular WYSIWYG editor. If you want to use a div it has to have the contenteditable=true attribute applied to it. You can read more about that here.

You can read more about execCommand from here.

Enjoy!
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Javascript WYSIWYG Editor Using an IFrame</title>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<style type="text/css">
a {
	font-size:20px;
	text-decoration:none;
	padding:0 10px 0 10px;
}
</style>
<script type="text/javascript">
window.onload = function() {
	richTextField.document.designMode = 'On';
}

function iUndo() {
	richTextField.document.execCommand('undo',false,null); 
}

function iRedo() {
	richTextField.document.execCommand('redo',false,null); 
}

function iCut() {
	richTextField.document.execCommand('cut',false,null); 
}

function iCopy() {
	richTextField.document.execCommand('copy',false,null); 
}

function iPaste() {
	richTextField.document.execCommand('paste',false,null); 
}

function iSelectAll() {
	richTextField.document.execCommand('selectAll',false,null); 
}

function iDelete() {
	richTextField.document.execCommand('delete',false,null); 
}

function iRemoveFormat() {
	richTextField.document.execCommand('removeFormat',false,null); 
}

function iBold() {
	richTextField.document.execCommand('bold',false,null); 
}

function iItalic() {
	richTextField.document.execCommand('italic',false,null); 
}

function iUnderline() {
	richTextField.document.execCommand('underline',false,null);
}
  
function iStrike() {
	richTextField.document.execCommand('strikethrough',false,null);
}

function iFontFamily() {
	var font = prompt('Enter a font', '');
	richTextField.document.execCommand('FontName',false,font);
}

function iFontSize() {
	var size = prompt('Enter a size 1 - 7', '');
	richTextField.document.execCommand('FontSize',false,size);
}

function iForeColor() {
	var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
	richTextField.document.execCommand('ForeColor',false,color);
}

function iBackColor() {
	var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
	richTextField.document.execCommand('BackColor',false,color);
}

function iAlignLeft() {
	richTextField.document.execCommand("justifyLeft", false, null);
}

function iAlignCenter() {
	richTextField.document.execCommand("justifyCenter", false, null);
}

function iAlignRight() {
	richTextField.document.execCommand("justifyRight", false, null);
}

function iIndent() {
	richTextField.document.execCommand("indent", false, null);
}

function iOutdent() {
	richTextField.document.execCommand("outdent", false, null);
}

function iParagraph() {
	richTextField.document.execCommand("insertParagraph", false, null);
}

function iHorizontalRule() {
	richTextField.document.execCommand('inserthorizontalrule',false,null);
}

function iUnorderedList() {
	richTextField.document.execCommand("InsertOrderedList", false,"newOL");
}

function iOrderedList() {
	richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
}

function iSuperScript() {
	richTextField.document.execCommand("superscript", false,null);
}

function iSubScript() {
	richTextField.document.execCommand("subscript", false,null);
}

function iLink() {
	var linkURL = prompt("Enter the URL for this link:", "http://"); 
	richTextField.document.execCommand("CreateLink", false, linkURL);
}

function iUnLink() {
	richTextField.document.execCommand("Unlink", false, null);
}

function iImage() {
	var imgSrc = prompt('Enter image location', '');
    if(imgSrc != null){
        richTextField.document.execCommand('insertimage', false, imgSrc); 
    }
}

function submit_form() {
	var theForm = document.getElementById("myform");
	theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML;
	theForm.onclick();
}
</script>
</head>
<body>

<form name="myform" id="myform" method="post">
	<!-- Navigation -->
	<div style="display:inline-block; position:absolute; top:0; left:0; right:0; padding-top:10px; height:35px; overflow-y: hidden; overflow-x: auto; white-space: nowrap;">
		<center>
			<a title="Code" href='javascript:submit_form();'><i class='fa fa-code'></i></a>
			<a title="Undo" href='javascript:iUndo()'><i class='fa fa-undo'></i></a>
			<a title="Redo" href='javascript:iRedo()'><i class='fa fa-repeat'></i></a>
			<a title="Cut" href='javascript:iCut()'><i class='fa fa-cut'></i></a>
			<a title="Copy" href='javascript:iCopy()'><i class='fa fa-copy'></i></a>
			<a title="Paste" href='javascript:iPaste()'><i class='fa fa-paste'></i></a>
			<a title="Select All" href='javascript:iSelectAll()'><i class='fa fa-circle-o'></i></a>
			<a title="Delete" href='javascript:iDelete()'><i class='fa fa-trash-o'></i></a>
			<a title="Remove format" href='javascript:iRemoveFormat()'><i class='fa fa-eraser'></i></a>
			<a title="Bold" href='javascript:iBold()'><i class='fa fa-bold'></i></a>
			<a title="Italic" href='javascript:iItalic()'><i class='fa fa-italic'></i></a>
			<a title="Underline" href='javascript:iUnderline()'><i class='fa fa-underline'></i></a>
			<a title="Strikethrough" href='javascript:iStrike()'><i class='fa fa-strikethrough'></i></a>
			<a title="Font Family" href='javascript:iFontFamily()'><i class='fa fa-font'></i></a>
			<a title="Text Size" href='javascript:iFontSize()'><i class='fa fa-text-height'></i></a>
			<a title="Text Color" href='javascript:iForeColor()'><i class='fa fa-font' style="color:red;"></i></a>
			<a title="Text BGColor" href='javascript:iBackColor()'><i class='fa fa-font' style="background:black; color:red;"></i></a>
			<a title="Align Left" href='javascript:iAlignLeft()'><i class='fa fa-align-left'></i></a>
			<a title="Align Center" href='javascript:iAlignCenter()'><i class='fa fa-align-center'></i></a>
			<a title="Align Right" href='javascript:iAlignRight()'><i class='fa fa-align-right'></i></a>
			<a title="Indent" href='javascript:iIndent()'><i class='fa fa-indent'></i></a>
			<a title="Outdent" href='javascript:iOutdent()'><i class='fa fa-outdent'></i></a>
			<a title="Paragraph" href='javascript:iParagraph()'><strong>P</strong></a>
			<a title="HorizontalRule" href='javascript:iHorizontalRule()'><i class='fa fa-minus-square-o'></i></a>
			<a title="Unordered List" href='javascript:iUnorderedList()'><i class='fa fa-list-ul'></i></a>
			<a title="Ordered List" href='javascript:iOrderedList()'><i class='fa fa-list-ol'></i></a>
			<a title="SuperScript" href='javascript:iSuperScript()'><i class='fa fa-superscript'></i></a>
			<a title="SubScript" href='javascript:iSubScript()'><i class='fa fa-subscript'></i></a>
			<a title="Link" href='javascript:iLink()'><i class='fa fa-link'></i></a>
			<a title="UnLink" href='javascript:iUnLink()'><i class='fa fa-unlink'></i></a>
			<a title="Image" href='javascript:iImage()'><i class='fa fa-picture-o'></i></a>
		</center>
	</div>

	<!-- Editor -->
	<iframe name="richTextField" id="richTextField" style="position:absolute; top:50px; height:90%; left:0; border:#000000 1px solid; width:50%;"></iframe>

	<!-- Generated Code -->
	<textarea name="myTextArea" id="myTextArea" style="position:absolute; top:50px; right:0; border:#000000 1px solid; width:50%; height:90%; padding:0; resize:none;" placeholder="Generate code here"></textarea>
</form>
</body>
</html>
Top
Post Reply
1 post Page 1 of 1
Return to “Tutorials”

Copyright Information

Powered by phpBB® Forum Software © phpBB Limited Privacy | Terms

Copyright © Codenstuff.com 2020 - 2023