Avatar billede michaelfranz Nybegynder
06. september 2011 - 00:44 Der er 6 kommentarer og
1 løsning

WYSIWYG editor!

Hej Eksperter.

Jeg er ved at lave en wysiwyg editor i javascript.

Pt har jeg lavet følgende funtion som virker.

function addClassToSelection(className){
    var sel = window.getSelection ? window.getSelection() : document.selection.createRange(); // FF : IE
        if(sel.getRangeAt){ // thats for FF
            var range = sel.getRangeAt(0);
            var newNode = document.createElement("span");
            newNode.setAttribute('class', className);
            range.surroundContents(newNode);
        } else { //and thats for IE7
            sel.pasteHTML('<span class="' + className + '">'+sel.htmlText+'</span>');
        }
    }

Hvor className er makeBold eller unBold for at tilføje de klasser så min CSS kan ses.

Men den opfører sig meget underligt engang imellem,, hvilket jeg tror skyldes at min span elementer ikke bliver slettet igen.

Er der en nemmere måde at gøre dette på eller bare en måde der virker og sletter elementerne igen.

Eventuelt noget som tilføjer <b> istedet for <span> og fjerner dem hvis man fjerner bold fra teksten.

Det skal lige nævnes at jeg har lavet en div contenteditable og at det ikke er et textarea(selvom det ikke er muligt) :).
I den div er det som kan ændres og hvis noget bliver markeret inde i den skal man kunne gøre det fed.

Har overvejet Rangy men har ikke kunnet få det til at virke.

På forhånd mange tak

Michael Franz
Avatar billede majbom Novice
06. september 2011 - 07:30 #1
er der nogen grund til at du starter fra bunden, i stedet for at bruge en af de utallige WYSIWYGer der ligger på www?
Avatar billede michaelfranz Nybegynder
06. september 2011 - 11:35 #2
Der ligger en masse har jeg godt set, men vil gerne lære dem bedre at kende om hvordan de fungerer derfor vil jeg prøve at lave en selv.. :)
Avatar billede majbom Novice
06. september 2011 - 12:16 #3
okay, fint nok - kan desværre ikke hjælpe dig...
Avatar billede TIversen Novice
06. september 2011 - 12:27 #4
Ambitiøest projekt! - Jeg kan ikke hjælpe dig, men held og lykke med det :D
Avatar billede olebole Juniormester
06. september 2011 - 18:22 #5
<ole>

Hvis du gerne vil vide, hvordan de fungerer, downloader du en og ser, hvordan den er lavet. Ellers kan du afprøve alle mulige blindgyder, som den du er havnet i med den kode, du viser.

Brug i stedet de API'er, de store browsere har indbygget til WYSIWYG-editering

/mvh
</bole>
Avatar billede michaelfranz Nybegynder
09. februar 2012 - 00:52 #6
lukket!
Avatar billede olebole Juniormester
09. februar 2012 - 14:11 #7
Ja, det havde tydeligvis ikke den store interesse
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester