Ute etter enkel editor.

[05t3k4k3]

Hallo, eg er ute etter ein wysiwyg teksteditor for ei webside eg driv å lagar.

 

Har leita litt men ikkje funne ein som fungerar bra nokk. Er det nokon som veit om ein eller kanskje har laga ein sjølv, så skriv det her. Editoren treng ikkje ha så mange funksjonar, berre valg for font, størrelse, bold, kursiv, understrek og hyperlenke. Lisensen på verket bør være åpen kjeldekode (GPL, BSD, CC). Sida eg driver på med brukar PHP.

 

Takk for svar.

[geir__hk]

Mozilla Suite som kan lastes ned her.

 

Ifølge en gammel artikkel fra 2005 så er Mozilla Suite et avsluttet prosjekt.

 

Men det følger med en enkel wswyg-editor

[05t3k4k3]

Det var ikkje ein vanlig editor eg var ute etter. Meir ein slik som blir brukt her på forumet foreksempel.

 

EDIT:

Eg trur Mozilla Suite går under namnet SeaMonkey no får tida.

Endret 10. november 2008 av 05t3k4k3

[trygveaa]

Jeg har ikke noen ferdig editor, men det er ganske enkelt å lage med enkel bruk av php, html, og hvis du vil ha knapper og trykke på, javascript.

 

Her er guide til hvordan du kan lage det i php.

For eksempel kan du bruke denne funksjonen i php.

 

function bbcode($content) {
$content = htmlspecialchars(stripslashes($content));
$content = preg_replace("@\[p\](.+?)\[\/p\]@i", "<p>$1</p>", $content);
$content = preg_replace("@\[h2\](.+?)\[\/h2\]@i", "<h2>$1</h2>", $content);
$content = preg_replace("@\[h3\](.+?)\[\/h3\]@i", "<h3>$1</h3>", $content);
$content = preg_replace("@\[b\](.+?)\[\/b\]@i", '<span style="font-weight:bold;">$1</span>', $content);
$content = preg_replace("@\[i\](.+?)\[\/i\]@i", '<span style="font-style:italic;">$1</span>', $content);
$content = preg_replace("@\[u\](.+?)\[\/u\]@i", '<span style="text-decoration:underline;">$1</span>', $content);
$content = preg_replace("@\[size=(.+?)\](.+?)\[\/size\]@i", '<span style="font-size:$1;">$2</span>', $content);
$content = preg_replace("@\[img\](.+?)\[\/img\]@i", "<img src=\"$1\" alt=\"\" />", $content);
$content = preg_replace("@\[img=(\d*)x(\d*)\](.+?)\[\/img\]@i", "<img src=\"$3\" alt=\"\" style=\"width:$1px;height:$2px;\" />", $content);
$content = preg_replace("@\[url\](.+?)\[\/url\]@i", "<a href=\"$1\">$1</a>", $content);
$content = preg_replace("@\[url=(.+?)\](.+?)\[\/url\]@i", "<a href=\"$1\">$2</a>", $content);
$content = str_replace("\n", '<br />', $content);
$content = preg_replace("@\[code\](.+?)\[\/code\]@i", "<span class=\"box\">$1</span>", $content);
return($content);
}

 

For å vise med html tagger skriver du da: echo bbcode($contents), hvor teksten med bbcode ligger i $contents.

 

Man kan da skrive tekst med bbcode. For å få knapper som legger til bbcode i tekstfeltet, kan du f.eks. bruke denne javascript koden:

 

function addTag (id, name) {
var textbox = document.getElementById(id);
textbox.focus();
document.selection.createRange().text = '[' + name + ']' + document.selection.createRange().text + '[/' + name + ']';	
}

function addLink (id) {
var textbox = document.getElementById(id);
textbox.focus();
document.selection.createRange().text = '[url=' + prompt('Skriv inn URL') + ']' + document.selection.createRange().text + '[/url]';	
}

 

id er id du har satt til tekstboksen, som det skal legges til. name er det som er inni bbcoden, f.eks. b for [b ][/b ]. Du skriver denne koden i html for å legge til en knapp:

<a href="java script: addTag('text', 'b');"><span style="font-weight:bold;">B</span></a>

Denne vil da legge til [b ][/b ] i koden. Hvis du har markert tekst før du trykker på den, vil den komme inni taggen.

[05t3k4k3]

Takk, skal sjå på det i kveld.

[05t3k4k3]

Når eg laga knappen "<a href="java script: addTag('text', 'b');"><span style="font-weight:bold;">B</span></a>" går den til "http://example.com/java%20script:%20addTag('text',%20'b');"

 

Eg kan ikkje javascript så eg litt lost, men bbcoden har eg fått til

[trygveaa]

Av en eller annen grunn legger diskusjon.no til mellomrom i javascript. Det skal stå i et ord i linken.

[05t3k4k3]

Har tatt vekk mellomrommet i linken, men eg har enda ikkje fått javascriptet til å fungere.

 

Er er eit eksempel på korleis det ser ut:

<html>
<head>
<title>Javascript test</title>
<style type="text/css">
.conteiner {
 width: 400px;
 background-color: #eee;
 padding: 5px;
}
.conteiner .buttons {
 background-color: #ddd;
 font-size: .8em;
 padding: 2px 5px;
}
input {
 width: 400px;
 font-size: 1.1em;
}
textarea {
 width: 400px;
 height: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
function addTag (id, name) {
var textbox = document.getElementById(id);
textbox.focus();
document.selection.createRange().text = '[' + name + ']' + document.selection.createRange().text + '[/' + name + ']';	
}

function addLink (id) {
var textbox = document.getElementById(id);
textbox.focus();
document.selection.createRange().text = '[url=' + prompt('Skriv inn URL') + ']' + document.selection.createRange().text + '[/url]';	
}
</script>
<p>
 <div class="conteiner">
<input type="text" name="title" maxlength="50" value="" />
 </div>
</p>
<p>
 <div class="conteiner">
<div class="buttons"><a href="java script: addTag('text', 'b');"><span style="font-weight:bold;">B</span></a></div>
<textarea name="content"></textarea>
 </div>
</p>
</body>
</html>

 

EDIT:

ja, det ser ut som diskusjon legg inn mellomrom i javascript linken.

Endret 15. november 2008 av 05t3k4k3

[JohndoeMAKT]

http://en.wikipedia.org/wiki/List_of_HTML_...WYSIWYG_editors

Se gjerne på Quanta Plus og Bluefish.

[05t3k4k3]

Eg skulle kanskje hatt ei betre overskrift på innlegget mitt. Les det innlegg nummer 3

 

EDIT:

Så det er feil å flytte denne posten til "Annet om programvare"

Endret 15. november 2008 av 05t3k4k3

[JohndoeMAKT]

Du er altså ute etter en teksteditor i en webside, jeg missforstå for en webside til at du var ute etter en HTML WYSIWYG-editor.

 

http://geniisoft.com/showcase.nsf/WebEditors

TinyMCE og FCKeditor er i så fall et par alternativer du kan se på.

http://www.fckeditor.net/demo/

[trygveaa]

Glemte visst å nevne at du må legge til en id i tekstfeltet som bbcoden skal legges til i. ID'en skal være samme som første parameter i javascript funksjonen.

 

Så tekstfeltet blir slik:

<textarea id="text" name="content"></textarea>

 

 

Også er det foretrukket å legge script-kode innenfor head.

[05t3k4k3]

takk, nå fungerar det