Avatar billede xicrow Nybegynder
19. maj 2010 - 23:39 Der er 16 kommentarer og
1 løsning

CKeditor interne links

Hej Eksperter.

Jeg har siddet og rodet med CKeditor for at få muligheden for at kunne indsætte interne links til det system jeg arbejder på.

Jeg fandt en løsning hvor der skal ændres i "link"-plugin'et, så den kan åbne en fil i et nyt vindue hvor man kan skrive sine links.

Men jeg er ikke så vild med den løsning, og tænkte på i stedet at lave en <select> uden for CKeditor, hvor man kan vælge interne sider på en liste, og så bliver de indsat i CKeditor-feltet der hvor cursoren er/var.

Der er jeg dog løbet i et par problemer. Indtil videre har jeg følgende kode (snapset og modificeret fra deres dokumentation):

jQuery(document).ready(function(){
    console.log(CKEDITOR);
   
    var element = new CKEDITOR.dom.element("a");
        element.setAttribute("href", "#");
        element.setAttribute("title", "Test");
        element.setHtml("Test");
   
    var writer = new CKEDITOR.htmlWriter();
        writer.openTag("a");
        writer.attribute("href", "#");
        writer.attribute("title", "Test");
        writer.text("Test");
        writer.closeTag("a");
});

console.log(CKEDITOR) : giver mig fint en oversigt over CKeditor-objektet
new CKEDITOR.dom.element("a") : giver mig fejlen: "CKEDITOR.dom is undefined"
new CKEDITOR.htmlWriter() : giver mig fejlen: "CKEDITOR.htmlWriter is not a constructor"

Er det nogen der:
1. ved hvad der er galt ?
2. har forslag til hvad jeg kan prøve ?
3. kender en løsning på mit generelle problem (indsæt HTML i CKeditor, udenfor CKeditor) ?

På forhånd tak
Avatar billede olebole Juniormester
20. maj 2010 - 09:45 #1
<ole>

Er der overhovedet instantieret et objekt? Noget kunne tyde på, dette ikke er tilfældet

/mvh
</bole>
Avatar billede xicrow Nybegynder
20. maj 2010 - 09:52 #2
Som der står nederst i min skrivelse:

console.log(CKEDITOR) : [b]giver mig fint en oversigt over CKeditor-objektet[b]
Avatar billede olebole Juniormester
20. maj 2010 - 10:11 #3
Nuvel, det kan jeg godt læse, men 11 års erfaring med Eksperten viser tydeligt, at feltet er meget bredt og kompetencerne meget forskellige. Derfor ved jeg ikke, om du mener, at du får et godt overblik over objektet eller over constructor'en  =)

Hvis dine fejlmeldinger ellers er korrekte, eksisterer der ikke et objekt, der hedder CKEDITOR - og som har en metode, der hedder dom. Derfor lyder det overvejende usandsynligt, at du har instantieret objektet.

Den eneste anden forklaring er, at du instantieret objektet og derefter slettet det igen. Det tillader jeg miog at anse for endnu mere usandsynligt
Avatar billede olebole Juniormester
20. maj 2010 - 10:23 #4
På denne demo side:
    http://ckeditor.com/demo

Eksisterer objektet - det har en metode ved navn dom - og her kan din kode godt afvikles uden fejl. Alt (og nu endnu mere) tyder med andre ord på, du ikke har instantieret objektet  =)
Avatar billede xicrow Nybegynder
20. maj 2010 - 10:28 #5
Det har du faktisk meget ret i :)

Ved min "console.log(CKEDITOR)" får en komplet oversigt over CKeditor objektet som har både "dom"-metoden (function()), og "dom"-metoden har en "element"-metode (function()). Og det samme gør sig gældende med "htmlWriter".

Den måde CKeditor bliver instantieret på er:

function load_ckeditor(){
    var ckeditor = CKEDITOR.replaceAll(function(textarea, config){
        if (textarea.className == '' || textarea.className != 'rich_text_editor'){
            return false;
        }
        // Masser af indstillinger
        // ...
    });
};
window.onload = load_ckeditor;

Som ligger i "config_custom.js" i "CKeditor" mappen.

Og det script jeg kører hvor jeg prøver at indsætte noget HTML i editoren ligger efter det <textarea> der bliver erstattet af CKeditor, altså i en anden fil.
Avatar billede olebole Juniormester
20. maj 2010 - 10:31 #6
Prøv at lægge et link til et eksempel
Avatar billede xicrow Nybegynder
20. maj 2010 - 10:31 #7
#4
Ja det kan jeg da egentligt godt se, meget mystisk :S

Men til det har jeg da lige et nyt spørgsmål :)
Hvor bliver HTML'en indsat ?

Hvis jeg via konsollen i Firebug indsætter følgende på demo-siden:

var element = new CKEDITOR.dom.element("a");
        element.setAttribute("href", "#");
        element.setAttribute("title", "Test");
        element.setHtml("Test");

Så kommer der ingen fejl, men linket bliver heller ikke indsat i editoren...
Avatar billede olebole Juniormester
20. maj 2010 - 10:33 #8
Nej, jeg kan godt se, der ikke bliver indsat noget - men der smides ikke fejl. Det er nok en god idé at finde årsagen til fejlen først  =)
Avatar billede xicrow Nybegynder
20. maj 2010 - 10:35 #9
#6
Gider ikke lige til at pille det ud af systemet, så du kan få lov til at kigge på den lokale version:
http://87.55.65.166/_JECMS/log-ind
admin / 1234
Avatar billede xicrow Nybegynder
20. maj 2010 - 10:36 #10
Det er forresten den side du kommer ind på efter login, den er gal med
Avatar billede olebole Juniormester
20. maj 2010 - 10:44 #11
Du opretter godt nok et DOM-element, men det skal jo appendes til editorens DOM-træ
Avatar billede xicrow Nybegynder
20. maj 2010 - 10:51 #12
Ok... Hvordan gør jeg så det ?

Altså det er for mig ligemeget om jeg via standard JS, eller jQuery, eller endda bare som en HTML-streng opretter et element.
Mit problem er bare hvordan jeg får det element smidt ind i editoren (gerne der hvor markøren er/var).

Og den måde jeg kom frem til at det skulle gøres på var via CKeditors "dom.element", eller "htmlwriter" funktioner/metoder.

Men det er som om de giver nogle nye problemer :)
Avatar billede olebole Juniormester
20. maj 2010 - 11:01 #13
Efter lidt debugging og undersøgelse af API'ets objekter og metoder, ser det ud til, jeg kan få dette til at virke, når jeg injecter det i din side:

var element = new CKEDITOR.dom.element("a");
element.setAttribute("href", "#");
element.setAttribute("title", "Test");
element.setHtml("Test");

CKEDITOR.instances.content.insertElement(element);
Avatar billede xicrow Nybegynder
20. maj 2010 - 11:11 #14
Hey det virker jo ! :D

Det var åbenbart et problem at det blev kørt "direkte", eller hvad man nu skal kalde det.

Smed din kode i en funktion, og så med en "onclick" på en knap virker det perfekt :D

function insert_element(){
    var element = new CKEDITOR.dom.element("a");
        element.setAttribute("href", "#");
        element.setAttribute("title", "Test");
        element.setHtml("Test");
   
    CKEDITOR.instances.content.insertElement(element);
}

Jeg siger tusinde mange tak for hjælpen !

Smider du et svar ?
Avatar billede olebole Juniormester
20. maj 2010 - 11:17 #15
Selvtak  =)
Avatar billede olebole Juniormester
20. maj 2010 - 11:24 #16
- og tak for points  ;o)
Avatar billede xicrow Nybegynder
20. maj 2010 - 11:28 #17
Det var så lidt da.

Uden din hjælp kunne jeg have stirret mig blind på det problem i flere dage ! :)
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

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