Modificare la finestra di dialogo di collegamento CKEditor per aggiungere attributo personalizzato ai collegamenti

Sto utilizzando CKEditor su un sito Web e devo essere in grado di inserire attributi di dati speciali su alcuni collegamenti creati tramite l'editor. L'utente indica che è necessario l'attributo speciale inserito nel collegamento selezionando una casella di controllo nella finestra di dialogo del collegamento. Sono riuscito ad aggiungere una casella di controllo alla finestra di dialogo di collegamento con il seguente codice:Modificare la finestra di dialogo di collegamento CKEditor per aggiungere attributo personalizzato ai collegamenti

CKEDITOR.on('dialogDefinition', function(ev) { 
    if (ev.data.name == "link") { 
     var info = dialog.getContents("info"); 
     info.elements.push({ 
      type: "vbox", 
      id: "urlOptions", 
      children: [{ 
       type: "hbox", 
       children: [{ 
        id: "button", 
        type: "checkbox", 
        label: "Button", 
        commit: function(data) { 
         data.button = this.getValue() 
         console.log("commit", data.button, data); 
        }, 
        setup: function(data) { 
         this.setValue(data.button); 
         console.log("setup", data.button, data); 
        } 
       }] 
      }] 
     }); 
    } 
});

Ora ho due problemi. Il primo è che nonostante io abbia aggiunto il codice nelle funzioni commit e setup che dovrebbe salvare lo stato della casella di controllo, non funziona. È come se lo data non fosse in grado di contenere nessun altro parametro ma quelli lì per impostazione predefinita.

Il secondo problema è che non so come aggiungere/rimuovere l'attributo di dati sui miei collegamenti. Mi sembra che dovrei farlo nella mia callback onOk nella finestra di dialogo, tuttavia, la finestra di dialogo di collegamento ha già un callback onOk, quindi non sono sicuro di come procedere. Io, ovviamente, non voglio modificare direttamente alcun file di CKEditor.

Come posso realizzare queste cose?

fonte

2012-10-15 Alex Turpin

L'opzione migliore è modificare il plug-in. Quindi è necessario aprire il codice sorgente e trovare il file links.js in c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\

Il codice sorgente è abbastanza grande (40k) ma qui è possibile modificare la finestra di dialogo come si desidera. Al termine basta copiarlo nella cartella dei plug-in e comprimerlo: http://jscompress.com/

Ho fatto quello che ti serve. Il file non compresso intero è qui: https://gist.github.com/3940239

Quello che dovete fare:

innanzitutto aggiungere questa linea appena prima che il pulsante di dialogo "browse" viene aggiunto. Circa. nella riga: 547:

     { 
          id: "button", 
          type: "checkbox", 
          label: "Button", 
          setup: function (data) { 
           this.allowOnChange = false; 

           if (data.button) 
            this.setValue(data.button); 

           this.allowOnChange = true; 
          }, 
          commit: function (data) { 
           data.button = this.getValue() 
           this.allowOnChange = false; 
          } 
         },

Questa parte è in realtà il tuo codice. L'ho appena copiato e incollato.

Quindi, passare alla funzione onOk, ca. in linea 1211: e dopo commitContent aggiungere questo codice:

this.commitContent(data); 

//My custom attribute 
if (data.button) 
    attributes["custom-attribute"] = "button"; 
else 
    attributes["custom-attribute"] = "";

Questo modificherà il tuo link aggiungendo l'attributo all'elemento come <a href="#" custom-attribute="button">text</a>

Questo è tutto. Sebbene, potresti anche voler caricare lo stato corrente della casella di controllo. Quindi, vai alla funzione parseLink. Circa. riga 179 per caricare gli attributi:

... 
if (element) 
{ 
    retval.button = element.getAttribute('custom-attribute'); 

    var target = element.getAttribute('target'); 
...

fonte

2012-10-23 17:35:15

Questo è molto buono, ma sono preoccupato per l'aggiornamento di CKEditor e la sovrascrittura di queste modifiche dopo. Sei sicuro che non ci siano modi per modificare il file stesso? –

Non penso che ci sia un altro modo per farlo. Vedo il tuo punto, ma stai apportando solo 3 piccole modifiche a 1 file nel codice sorgente che dovrebbe richiedere 1 minuto per rifare. È sempre possibile eseguire il backup della cartella "link" e trattarla come plug-in. Quindi, se è necessario aggiornare, si decomprime sempre quel file che include le proprie funzionalità. –

@ Xeon06 hai provato questo? Leggendo il codice sorgente di CKEditor, la finestra di dialogo di collegamento non espone queste funzioni alla configurazione principale. La modifica del codice sorgente è l'unica soluzione. –

Sto esplorando la stessa cosa ora. Quello che ho deciso di fare a questo punto è quello di:

Prendi un ckeditor base di installazione senza il plugin collegamento
creare il mio forchetta del plugin di collegamento, e aggiungere le mie modifiche ad esso, quindi attivare e utilizzare questo plugin all'interno del gruppo che si collega normalmente viene visualizzato in.

...lavorare con esso come plugin personalizzato (anche se una copia dell'originale) dovrebbe alleviare il problema dell'aggiornamento. Semplicemente non utilizzare affatto il plug-in di collegamento originale. Copia e rinomina e usa invece la tua copia personalizzata.

fonte

2013-03-02 18:55:45

Modificare la finestra di dialogo di collegamento CKEditor per aggiungere attributo personalizzato ai collegamenti

risposta

Problemi correlati