M
Madame Blablavatsky
hello,
i am trying to make a very simple 'ritch text editor', so people can choose
the font type and font color when they
fill out a form.
i have made a very simple structure to see how it works.
people can choose the font color, this works fine but there is one problem:
when one is typing and then chooses to change the font color the cursor goes
always
to the beginning of the line!! although it changes to the right color.
this problem does not occur when i change to bold/underline/italic/font
type/font size;
(when you copy/paste the source it will all be clear).
why does this happen and how can i prevent it?
thanks,
==================== source =========================
<html>
<head>
<script type='text/javascript'>
function maakDesignMode(){
document.inlijnFrame.document.designMode = 'On';
}
function opmaak(opdracht, option){
document.getElementById('inlijnFrame').contentWindow.focus();
document.getElementById('inlijnFrame').contentWindow.document.execCommand(op
dracht, false, option);
document.getElementById('inlijnFrame').contentWindow.focus();
document.getElementById('menu').style.visibility = 'hidden';
document.images.pBold.src = 'uBold.gif';
}
<!-- toggle image and show color menu --------------->
function menuZien(naam){
var aantal;
var uitkomst;
uitkomst = naam.src.split("/");
aantal = uitkomst.length - 1;
if(uitkomst[aantal] == 'uBold.gif'){
document.images.pBold.src = 'aBold.gif';
document.getElementById('menu').style.visibility = 'visible';
}else{
document.images.pBold.src = 'uBold.gif';
document.getElementById('menu').style.visibility = 'hidden';
}
}
</script>
<style type='text/css'>
#menu{
visibility: hidden;
}
</style>
</head>
<body>
<img src='uBold.gif' id='pBold' onClick='menuZien(this)';>
<div id='menu'>
<table border='1'>
<tr>
<td width='15' bgcolor='#cc33cc' onClick="opmaak('ForeColor',
'#cc33cc')";> </td>
<td width='15' bgcolor='#f88548' onClick="opmaak('ForeColor',
'#f88548')";> </td>
<td width='15' bgcolor='#47b2f9' onClick="opmaak('ForeColor',
'#47b2f9')";> </td>
</tr>
</table>
</div>
<iframe src='laden.html' name='inlijnFrame' id='inlijnFrame'></iframe>
<script type='text/javascript'>
maakDesignMode()
</script>
</body>
</html>
========================================================
i am trying to make a very simple 'ritch text editor', so people can choose
the font type and font color when they
fill out a form.
i have made a very simple structure to see how it works.
people can choose the font color, this works fine but there is one problem:
when one is typing and then chooses to change the font color the cursor goes
always
to the beginning of the line!! although it changes to the right color.
this problem does not occur when i change to bold/underline/italic/font
type/font size;
(when you copy/paste the source it will all be clear).
why does this happen and how can i prevent it?
thanks,
==================== source =========================
<html>
<head>
<script type='text/javascript'>
function maakDesignMode(){
document.inlijnFrame.document.designMode = 'On';
}
function opmaak(opdracht, option){
document.getElementById('inlijnFrame').contentWindow.focus();
document.getElementById('inlijnFrame').contentWindow.document.execCommand(op
dracht, false, option);
document.getElementById('inlijnFrame').contentWindow.focus();
document.getElementById('menu').style.visibility = 'hidden';
document.images.pBold.src = 'uBold.gif';
}
<!-- toggle image and show color menu --------------->
function menuZien(naam){
var aantal;
var uitkomst;
uitkomst = naam.src.split("/");
aantal = uitkomst.length - 1;
if(uitkomst[aantal] == 'uBold.gif'){
document.images.pBold.src = 'aBold.gif';
document.getElementById('menu').style.visibility = 'visible';
}else{
document.images.pBold.src = 'uBold.gif';
document.getElementById('menu').style.visibility = 'hidden';
}
}
</script>
<style type='text/css'>
#menu{
visibility: hidden;
}
</style>
</head>
<body>
<img src='uBold.gif' id='pBold' onClick='menuZien(this)';>
<div id='menu'>
<table border='1'>
<tr>
<td width='15' bgcolor='#cc33cc' onClick="opmaak('ForeColor',
'#cc33cc')";> </td>
<td width='15' bgcolor='#f88548' onClick="opmaak('ForeColor',
'#f88548')";> </td>
<td width='15' bgcolor='#47b2f9' onClick="opmaak('ForeColor',
'#47b2f9')";> </td>
</tr>
</table>
</div>
<iframe src='laden.html' name='inlijnFrame' id='inlijnFrame'></iframe>
<script type='text/javascript'>
maakDesignMode()
</script>
</body>
</html>
========================================================