0
Its regarding a WYSIWYG editor. I've got it mostly down atm, with a few exceptions with figuring out how to parse it into BBCode when viewing it in text view and then back into HTML when viewing in HTML view.
When i change it from html view with formatted text, it works and shows the markup, but when i try and change back into HTML view it doesnt work. But when i click to change view again, it parses the brackets so < > becomes < >.
The & sign becomes & if i click it once more, and it will keep adding amp; the more i click it.
Please help. I don't really need the RTE style editor, but it would be something "nice" for this project.
The page Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> RTE Editor </title>
<script language="JavaScript">
var viewMode;
window.onload = function(){
viewMode = 1;
rte_window.document.designMode = 'On';
rte_window.document.body.innerHTML = 'Hello';
}
function do_bold(){
rte_window.document.execCommand('Bold',false, null);
}
function do_italic(){
rte_window.document.execCommand('Italic',false, null);
}
function do_underline(){
rte_window.document.execCommand('Underline',false, null);
}
function do_justify(ctrl){
switch(ctrl){
case 'left':
rte_window.document.execCommand('Justifyleft',false, null);
break;
case 'center':
rte_window.document.execCommand('Justifycenter',false, null);
break;
case 'right':
rte_window.document.execCommand('Justifyright',false, null);
break;
}
}
function do_list(ctrl){
switch(ctrl){
case 'ordered':
rte_window.document.execCommand('insertorderedlist',false, null);
break;
case 'bullet':
rte_window.document.execCommand('insertunorderedlist',false, null);
break;
}
}
function do_http(){
alink = prompt('url?','')
if(alink != null)
rte_window.document.execCommand('createlink', false, alink);
}
function do_color(){
var fCol = prompt('Enter foreground color', '');
if(fCol != null)
rte_window.document.execCommand('forecolor', false, fCol);
}
function do_bgcolor(){
var fCol = prompt('Enter background color', '');
if(fCol != null)
rte_window.document.execCommand('backcolor', false, fCol);
}
function do_image(){
var imgSrc = prompt('Enter image location', '');
if(imgSrc != null)
rte_window.document.execCommand('insertimage',false, imgSrc);
}
function do_horizontal(){
rte_window.document.execCommand('inserthorizontalrule',false, null);
}
function toggleview(){
if(viewMode == 1){
windowText = rte_window.document.body.innerHTML;
rte_window.document.body.innerText = windowText;
rte_window.focus();
viewMode = 2;
}else{
windowText = rte_window.document.body.innerText;
rte_window.document.body.innerText = windowText;
rte_window.focus();
viewMode = 1;
}
}
</script>
<style>
* {
margin:0px; padding:0px;
}
#rte_editor .reviewer { width:600px; display:block;}
#rte_editor .buttons { width:600px; float:left; display:block;}
#rte_editor .window iframe {clear:both; float:left; border:1px #000 solid; }
</style>
<body>
<div id="rte_editor" class="reviewer">
<div class="buttons">
<img alt="Bold" src="images/skin/rte_editor/bold.gif" onclick="do_bold()">
<img alt="Italic" src="images/skin/rte_editor/italic.gif" onclick="do_italic()">
<img alt="Underline" src="images/skin/rte_editor/underline.gif" onclick="do_underline()">
<img alt="Left" src="images/skin/rte_editor/left.gif" onclick="do_justify('left')">
<img alt="Center" src="images/skin/rte_editor/center.gif" onclick="do_justify('center')">
<img alt="Right" src="images/skin/rte_editor/right.gif" onclick="do_justify('right')">
<img alt="Ordered List" src="images/skin/rte_editor/ordlist.gif" onclick="do_list('ordered')">
<img alt="Bulleted List" src="images/skin/rte_editor/bullist.gif" onclick="do_list('bullet')">
<img alt="Text Color" src="images/skin/rte_editor/forecol.gif" onclick="do_color()">
<img alt="Background Color" src="images/skin/rte_editor/bgcol.gif" onclick="do_bgcolor()">
<img alt="Hyperlink" src="images/skin/rte_editor/link.gif" onclick="do_http()">
<img alt="Image" src="skin/rte_editor/image.gif" onclick="do_image()">
<img alt="Horizontal Rule" src="images/skin/rte_editor/rule.gif" onclick="do_horizontal()">
<img alt="Toggle Mode" src="images/skin/rte_editor/mode.gif" onclick="toggleview()" style="float:right;">
</div>
<div class="window">
<iframe id="rte_window" style="width:600px; height:500px;" frameborder="0"></iframe>
</div>
<div class="submitbuttons">
</div>
</div>
</body>
</html>
Edited by Jynxis, 26 June 2009 - 06:28 PM.
