Tässä olisi siis ensimmäinen koodivinkkini ikinä.
koodi on hiukan köpö, mutta toimii kuitenkin. Tällä saa aikan Richtext editorin, jolla tehdään ensin hiukan word tyylistä juttua, ja sitten voi katsoa sen lähdekoodin html muodossa.
Ominaisuudet:
* Painotus (bold)
* Kursivointi (italic)
* Alleviivaus (underline)
* Linkkien lisäys (link) (ei toimi kunnolla)
* Värien käyttö (color) (Helppo lisätä itse omia)
Itsehän olen siis koodia vain parannellut ja suomentanut. Lisäksi kommentoin koodia sen minkä itse siitä tajusin.
richeditor.html (voi olla mikä tahansa
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Richtext editor</title>
<style>
body {background-color:#D6E7F7;}
span.button {border: 2px outset white; padding-left: 5px; padding-right: 5px; cursor: default}
span.button:active {border-style: inset}
button {background-color:transparent; padding:2px;}
iframe {border: 1px solid black;}
</style>
<script>
function load(){
getIFrameDocument("editorWindow").designMode = "On";
}
function getIFrameDocument(aID){
if (document.getElementById(aID).contentDocument){
return document.getElementById(aID).contentDocument;
} else {
return document.frames[aID].document;
}
}
function doRichEditCommand(aName, aArg){
getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
document.getElementById('editorWindow').contentWindow.focus()
}
/* tässä määritellään url osoite linkkeihin */
function addLink(){
var myUrl = prompt("Kirjoita www osoite:", "");
getIFrameDocument("editorWindow").execCommand("createLink", false, myUrl);
}
/* Tässä katsotaan lähdekoodia */
function getSource(){
document.getElementById("sourceView").innerHTML = replace(getIFrameDocument("editorWindow").body.innerHTML,"<","<");
}
function replace(string,text,by) {
var stringLength = string.length
var textLength = text.length;
if ((stringLength == 0) || (textLength == 0)) return string;
var i = string.indexOf(text);
if ((!i) && (text != string.substring(0,textLength))) return string;
if (i == -1) return string;
var newstr = string.substring(0,i) + by;
if ( (i+textLength) < stringLength)
newstr += replace(string.substring(i+textLength,stringLength),text,by);
return newstr;
}
</script>
</head>
<body onload="load()">
<div id="editor" class="tabPanel">
/* tässä on määrittelyt alleviivaukselle, kursiiville yms. */
<p>
<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>
<button onclick="doRichEditCommand('italic')" style="font-style:italic;">I</button>
<button onclick="doRichEditCommand('underline')" style="text-decoration:underline;">U</button> |
/* lisää linkki nappula */
<button onclick="addLink()">Lisää linkki</button> |
/* tässä määritellään värit */
<select onchange="doRichEditCommand('forecolor',this.options[this.selectedIndex].value)">
<option>Valitse väri</option>
<option value="black">Musta</option>
<option value="red">Punainen</option>
<option value="blue">Sininen</option>
<option value="orange">Oranssi</option>
<option value="brown">Ruskea</option>
<option value="white">Valkoinen</option>
<option value="green">Vihreä</option>
<option value="yellow">Keltainen</option>
<option value="pink">Vaaleanpunainen</option>
<option value="lime">Limetti</option>
<option value="cyan">Syaani</option>
<option value="skyblue">Taivaan sininen</option>
</select>
/* sitten liitetään erittäin huono tiedosto iframella */
<iframe src="tausta.html" id="editorWindow" width="90%" style="margin:5px;"></iframe>
</p>
/* näytä lähdekoodi nappi */
<button onclick="getSource()" >Nätä lähdekoodi</button>
</div>
<div id="sourceView"></div>
</body>
</html>tausta.html (ei saa muutta
<body bgcolor="white">
Aihe on jo aika vanha, joten et voi enää vastata siihen.