14 svar · 427 visningar · startad av matt_helvey
hur kan man få tex röd färg inom speciella paraneser tex [fett]fet text[/fett] ( <b></b> ) i en TEXTFIELD (ska ha det till typ en editor) sedan när [fett] parantesen avslutas (/) ska det bli tex normal svart textfärg igen (som dreamweaver), fatta?
är detta ens möjligt?
Jo, om man använder en MSHTML editor. Jag provade att göra HTML-editor med hjälp av en MSHTML-editor men fick aldrig till det så det blev riktigt bra. Lägger man ner lite mer tid på det så kanske...
Men kör man med en MSHTML editor så kan man ju lika gärna göra det WYSIWYG. :)
<script type="text/javascript" language="javascript">
function myCallback(f){
f = f.replace(/\[(b|i|u)\](.*?)\[\/(b|i|u)\]/ig,"<$1>$2</$3>");
f = f.replace( /\[url\](.+)\[\/url\]/ig, '<a href="$1">$1</a>' );
f = f.replace( /\[email\](.+)\[\/email\]/ig, '<a href="mailto:$1">$1</a>' );
document.getElementById("bar").innerHTML = f;
};
</script>
<form>
<textarea name="foo" onkeyup="myCallback(this.value)"></textarea>
</form>
<div id="bar"></div>
Fet text
Kursiv text
Understruken text
Länk
epostlänk
Kan ju byggas ut.
Ungefär så min grej funkade. Men istället så färgade den koden istället för att byta ut den. Ungefär som en kodeditor.
Jobbiga är bara att när man gör så så hamnar markören hela tiden sist. Ganska irriterande. :)
?
Alltså i textboxen man skriver in koden ska koden färgas till olika färger så man håller rätt på dem, tex javascript i röd text tabeller i grön osv. hehe, det var det jag undra... ;)
tack för MSHTML'n
Men ni verkar inte vilja fatta. har ni använt dreamweaver? när man väljer kodläge så färgas koden för att man ska kunna se det bättre, i stället för tex notepad där allt är svart.. jag undra om man kan färga koden I TEXTFÄLTET, inte resultatet..
I ett vanligt textfält i en form kan du inte det.
Man får göra det med en MSHTML editor då. Det irriterande blir då som jag sa att markören hamnar sist efter varje tecken man skriver. Irriterande om man redigerar någonting i mitten av texten.
Tror att jag sett en javaapplet som fixade att färga kod. Minns dock inte var. Att bygge en med regexp eller så kommer säkert att bli svårt.
Ganska enkelt egentligen. Jobbiga är bara att få det att köra på ett smart sätt medans man skriver. Att det blir en massa replaces hela tiden håller inte riktigt. :l
om det är ganska enkelt kan du ju bara visa en kodsnutt så jag får lite kickstart...
Sure. Som du ser så funkar den fint när man skriver i slutet. Skriver man däremot i mitten så hoppar markören.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
BODY {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
DIV.editor {
width: 100%;
height: 100%;
font-family: Courier New;
font-size: 13px;
padding: 10px;
}
SPAN.tag {
color: red;
}
</style>
<script type="text/javascript">
function parseHTML()
{
var html = editor.innerHTML;
html = html.replace(/<br>/gi, "\n");
html = html.replace(/<[^>]*>/gi, "");
html = html.replace(/\n/gi, "<br>");
html = html.replace(/(\<\;[\s\S]*?\>\;)/gi, "<span class=\"tag\">$1</span>");
editor.innerHTML = html;
}
function load()
{
var html = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">\n<html>\n<head>\n<title></title>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">\n</head>\n<body>\ncscscscs\n<div class=\"editor\" contentEditable></div>\ncsscsc\n\n</body>\n</html>";
html = html.replace(/\n/gi, "<br>");
editor.innerHTML = html;
parseHTML();
}
</script>
</head>
<body onLoad="load();">
<div id="editor" class="editor" contentEditable onKeyUp="parseHTML();"></div>
</body>
</html>
flippigt, jaja... tack