Eksternt stylesheet i wysiwyg editor
HejLade mig sige det med det samme, at jeg er´en dør til js. Jeg har dog fundet et wisywyg script og rettet funktioner mm til således, at det passer til mit site.
jeg anvender et sksterne stylesheet og vil gerne have at dette anvendes når der vælges heading og tekst.
er der nogen der kan løse dette?
mvh gf
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/tekst%20og%20link.css"/>
<title> Browser Based HTML Editor </title>
<script language="JavaScript">
var viewMode = 1; // WYSIWYG
function Init()
{
iView.document.designMode = 'On';
}
function selOn(ctrl)
{
ctrl.style.borderColor = '#000000';
ctrl.style.backgroundColor = '#B5BED6';
ctrl.style.cursor = 'hand';
}
function selOff(ctrl)
{
ctrl.style.borderColor = '#D6D3CE';
ctrl.style.backgroundColor = '#D6D3CE';
}
function selDown(ctrl)
{
ctrl.style.backgroundColor = '#8492B5';
}
function selUp(ctrl)
{
ctrl.style.backgroundColor = '#B5BED6';
}
function doBold()
{
iView.document.execCommand('bold', false, null);
}
function doItalic()
{
iView.document.execCommand('italic', false, null);
}
function doUnderline()
{
iView.document.execCommand('underline', false, null);
}
function doLeft()
{
iView.document.execCommand('justifyleft', false, null);
}
function doCenter()
{
iView.document.execCommand('justifycenter', false, null);
}
function doRight()
{
iView.document.execCommand('justifyright', false, null);
}
function doOrdList()
{
iView.document.execCommand('insertorderedlist', false, null);
}
function doBulList()
{
iView.document.execCommand('insertunorderedlist', false, null);
}
function doForeCol()
{
var fCol = prompt('Enter foreground color', '');
if(fCol != null)
iView.document.execCommand('forecolor', false, fCol);
}
function doBackCol()
{
var bCol = prompt('Enter background color', '');
if(bCol != null)
iView.document.execCommand('backcolor', false, bCol);
}
function doLink()
{
iView.document.execCommand('createlink');
}
function doImage()
{
var imgSrc = prompt('Enter image location', '');
if(imgSrc != null)
iView.document.execCommand('insertimage', false, imgSrc);
}
function doRule()
{
iView.document.execCommand('inserthorizontalrule', false, null);
}
function doFont(fName)
{
if(fName != '')
iView.document.execCommand('fontname', false, fName);
}
function doSize(fSize)
{
if(fSize != '')
iView.document.execCommand('fontsize', false, fSize);
}
function doHead(hType)
{
if(hType != '')
{
iView.document.execCommand('formatblock', false, hType);
doFont(selFont.options[selFont.selectedIndex].value);
}
}
function doToggleView()
{
if(viewMode == 1)
{
iHTML = iView.document.body.innerHTML;
iView.document.body.innerText = iHTML;
// Hide all controls
tblCtrls.style.display = 'none';
selFont.style.display = 'none';
selSize.style.display = 'none';
selHeading.style.display = 'none';
iView.focus();
viewMode = 2; // Code
}
else
{
iText = iView.document.body.innerText;
iView.document.body.innerHTML = iText;
// Show all controls
tblCtrls.style.display = 'inline';
selFont.style.display = 'inline';
selSize.style.display = 'inline';
selHeading.style.display = 'inline';
iView.focus();
viewMode = 1; // WYSIWYG
}
}
</script>
<style>
.butClass
{
border: 1px solid;
border-color: #D6D3CE;
}
.tdClass
{
padding-left: 3px;
padding-top:3px;
}
</style>
</head>
<body onLoad="Init()">
<table id="tblCtrls" width="800px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE"font="Trebuchet">
<tr>
<td class="tdClass">
<img alt="Bold" class="butClass" src="bold.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBold()">
<img alt="Italic" class="butClass" src="italic.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doItalic()">
<img alt="Underline" class="butClass" src="underline.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doUnderline()">
<img alt="Left" class="butClass" src="left.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLeft()">
<img alt="Center" class="butClass" src="center.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doCenter()">
<img alt="Right" class="butClass" src="right.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRight()">
<img alt="Ordered List" class="butClass" src="ordlist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doOrdList()">
<img alt="Bulleted List" class="butClass" src="bullist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBulList()">
<img alt="Hyperlink" class="butClass" src="link.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLink()">
<img alt="Horizontal Rule" class="butClass" src="rule.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRule()">
</td>
</tr>
</table>
<iframe id="iView" style="width: 800px; height:205px"></iframe>
<table width="800px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td class="tdClass">
<select name="selFont" onChange="doFont(this.options[this.selectedIndex].value)">
<option value="">-- Font --</option>
<option value="Arial">Arial</option>
<option value="Courier">Courier</option>
<option value="Sans Serif">Sans Serif</option>
<option value="Tahoma">Tahoma</option>
<option value="Verdana">Verdana</option>
<option value="Trebuchet">Trebuchet</option>
</select>
<select name="selHeading" onChange="doHead(this.options[this.selectedIndex].value)">
<option value="">-- Heading --</option>
<option value="Heading 1">H1</option>
<option value="Heading 2">H2</option>
<option value="Heading 3">H3</option>
<option value="Heading 4">H4</option>
<option value="Heading 5">H5</option>
<option value="Heading 6">H6</option>
</select>
</td>
</tr>
</table>
</body>
</html>
