Søg
Avatar billede oposit Nybegynder
14. oktober 2002 - 18:41 Der er 7 kommentarer og
1 løsning

Integration af CSS i webbaseret editor

Jeg er ved at bygge en webbaseret html editor.

Jeg vil have integreret CSS, men kan ikke finde ud af en løsning. Jeg kan se de har løst det i http://www.webedpro.com/demo/webedit.pl men jeg kan ikke finde ud af hvordan.

Er der nogen der har en pointer til en løsning ?

vh

Brian
Avatar billede pelkjaer Nybegynder
14. oktober 2002 - 22:06 #1
Well nu ved jeg ikke hvordan du har sammensat din editor.

Men jeg går ud fra at du på et tidspunkt intialiserer din editor ( din_iframe.document.designMode = "on" osv.), og her må du jo så også definere udseendet af denne iframe i designmode.

Her smider du så også et link til de styles du vil bruge sådan så man også i selve editoren kan se forskellen på de forskellige styles.

Jeg gør fx. således:

var sHTML = ""
    sHTML += ""
        + "<STYLE>"
        +    "BODY {border: 1px lightgrey solid;}"
        + "</STYLE>"
        + "<LINK REL=\"STYLESHEET\" HREF=\"EDITOR_CSS.CSS\">"
        + "<BODY ONCONTEXTMENU=\"return false\">"
        + "</BODY>"

Netop EDITOR_CSS.CSS indeholder de omtalte styles - og de styles har jeg selvfølgelig også i mit front-end dokument (det du editerer) med samme navne.

Så langt så godt - nu kan din editor vise dine styles i design-mode.

----------------------------------------------------------------------

Herefter laver du fx. en select der hiver de styles ud du skal bruge (samme som du linker til ovenfor), hvor options's value er dine styles. Fx:

<option value="smalltext">Normal skrift</option>
<option osv....>bla</option>

Nu mangler du blot at "wrappe" disse styles ind i dine tekster med document.selection.createRange() og pasteHTML

Min iframe hedder fx. "idContent" så min funktion ser således ud:

function applyStyle(Style)
    {
    //get selection
    var oSel    = idContent.document.selection.createRange()
    var sType = idContent.document.selection.type
    //if (sType!="Control"&&sType!="None")
    if(oSel.parentElement != null)
        {
        sApplied = "<font class='"+Style+"'>"+oSel.text+"</font>"
        oSel.pasteHTML(sApplied)
        }
    }

Så fik du det hele på et sølvfad :)
Avatar billede oposit Nybegynder
14. oktober 2002 - 23:51 #2
Det er rigtigt fornuftigt ud !

Men hvad med overlappende tags ? Er der en god metode ?

vh Oposit
Avatar billede pelkjaer Nybegynder
14. oktober 2002 - 23:52 #3
Overlappende tags? Den skal du uddybe :)
Avatar billede oposit Nybegynder
15. oktober 2002 - 13:52 #4
Jeg mener følgende senario, først har man følgende tekst:

<font class="pop">Dette er pop</font>, men dette er normalt

derefter vælger man teksten 'pop, men dette er normalt' til at være class='head', resultatet er :

<font class="pop">Dette er <font class="head">pop</font>, men dette er normalt</font>

D.v.s. at nu er kun ordet pop i class='head', og ', men dette er normalt' er i class='pop'.

Jeg håber det kan forstås
Avatar billede pelkjaer Nybegynder
15. oktober 2002 - 14:01 #5
Der må du/dine brugere jo simpelthen tænke sig om - ligesom hvis de først vælger en font face="verdana" e.lign. og derefter en heading - det giver også slamkode.

Du laver jo netop først så man i designview kan se hvad der sker, så hvis en tekst allerede er stylet inden du vil style den på ny, så fjerner du selvfølgelig den eksisterende style. Helt standard med 'RemoveFormat'
Avatar billede pelkjaer Nybegynder
15. oktober 2002 - 14:04 #6
Eller også må du ryde op i din kode ved save - enten med regexp eller også med et serverside script
Avatar billede oposit Nybegynder
15. oktober 2002 - 14:05 #7
Ja, du har ret brugerne burde jo tænke sig om, men det kan man ikke regne med.

Tusind tak for hjælpen !
Avatar billede pelkjaer Nybegynder
15. oktober 2002 - 14:08 #8
Velbekomme.
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
11/0521:05 Questyle M15i lydforstærker Af valby i Diverse
11/0518:27 Mærkeligt ikon på proceslinjen Af ErikHg i Windows
11/0513:54 Jeg skal have indstaleret Garmin express Af skolevej321 i Andet software
11/0510:48 Back up af foto til ekstern harddisk Af hkprofil i Office & Kontorpakker
10/0517:11 Har glemt navn på min ene konto på eksperten! Af ErikHg i Fri debat
White papers
Flere white papers »