Ckeditor con completamento automatico?

Question

È possibile implementare il completamento automatico jquery in qualche modo nel ckeditor? La creazione di un pulsante non è così difficile, ma è possibile cablarla per completarla automaticamente, quindi la parola successiva viene digitata fino a quando il pulsante non viene premuto di nuovo ...?

Chiunque, che ha fatto in remoto qualcosa del genere, per favore fatemelo sapere. O se ciò non è possibile, una finestra popup di una ricerca automatica completa, e poi su click/selezionarlo aggiungere l'elemento selezionato a textarea ckeditor/posizione corrente del cursore (forse come un collegamento ...)?

Cercando di non sbilanciarsi ovviamente :)

Answer 1

ho fatto qualcosa di simile in remoto che, non con CKEdit ma con markItUp.

Il lavoro di completamento automatico viene eseguito da a plugin basato sull'interfaccia utente di jQuery.

Ho avuto il problema di integrare il completamento automatico all'interno di un'area di testo CKEdit. Poi ho riflettuto meglio e ho cambiato i requisiti. Preferivo un editor di markup al posto dell'editor WYSIWYG (word processor like). Forse questo non si applica a te, ma considera anche di valutare questo punto di vista.

Se è possibile trasformare la casella di testo wysiwyg in editor di markup, la bella sorpresa è che markItUp e il plugin di completamento automatico funzionano molto bene insieme. Basta impostare la tua textarea per markItUp, quindi abilitare il completamento automatico. markItUp è buono, non è lo stesso per il plugin. Per questo c'è un progetto demo.

Answer 2

Al fine di rendere una scatola di suggerimento, si dovrà fare il vostro plugin personalizzato da utilizzare menu contestuale come cassetta dei suggerimenti, si prega di consultare il link per la conoscenza di base di fare plug ckeditor da qui a link

Aggiungere questo ai vostri config.js, dove completamento automatico è il nome del plugin

config.extraPlugins = 'autocomplete'; 

quindi creare una struttura di directory seguente/file nella cartella ckeditor

ckeditor->plugins->autocomplete->plugin.js 

Inserire il seguente contenuto dei tuoi file di plugin.js

CKEDITOR.plugins.add('autocomplete', 
      { 
       init : function(editor) { 

        var autocompleteCommand = editor.addCommand('autocomplete', { 
         exec : function(editor) { 

Avremo bisogno di creare un arco fittizio nel documento per calcolare la posizione corrente del menu mostrato

      var dummyElement = editor.document 
            .createElement('span'); 
          editor.insertElement(dummyElement); 

          var x = 0; 
          var y = 0; 

          var obj = dummyElement.$; 

          while (obj.offsetParent) { 
           x += obj.offsetLeft; 
           y += obj.offsetTop; 
           obj = obj.offsetParent; 
          } 
          x += obj.offsetLeft; 
          y += obj.offsetTop; 

          dummyElement.remove(); 

Dopo il calcolo la posizione, rimuoviamo l'elemento e chiamiamo il metodo per mostrare i suggerimenti (inseriti nel menu contestuale, che sono configurati nella prossima funzione)

      editor.contextMenu.show(editor.document 
            .getBody(), null, x, y); 
         } 
        }); 
       }, 

Ecco il binding listener sull'editor per verificare se la chiave corrente è # o no, CKEDITOR.SHIFT + 51 è la combinazione di tasti per #

   afterInit : function(editor) { 
        editor.on('key', function(evt) { 
         if (evt.data.keyCode == CKEDITOR.SHIFT + 51) { 
          editor.execCommand('autocomplete'); 
         } 
        }); 

reloadSuggetionBox comando sarà chiamato dal jquery esterna per generare il menu subito dopo il ckeditor è pronto

    var firstExecution = true; 
        var dataElement = {}; 

        editor.addCommand('reloadSuggetionBox', { 
          exec : function(editor) { 
           if (editor.contextMenu) { 
            dataElement = {}; 
            editor.addMenuGroup('suggestionBoxGroup'); 

          $.each(Suggestions,function(i, suggestion) 
          { 
            var suggestionBoxItem = "suggestionBoxItem"+ i; 
            dataElement[suggestionBoxItem] = CKEDITOR.TRISTATE_OFF; 
            editor.addMenuItem(suggestionBoxItem, 
                     { 
             id : suggestion.id, 
             label : suggestion.label, 
             group : 'suggestionBoxGroup', 
             icon : null, 
             onClick : function() { 
              var data = editor.getData(); 
              var selection = editor.getSelection(); 
              var element = selection.getStartElement(); 
              var ranges = selection.getRanges(); 
              ranges[0].setStart(element.getFirst(), 0); 
              ranges[0].setEnd(element.getFirst(),0); 
              editor.insertHtml(this.id + ' '); 
              }, 
              }); 
            }); 

            if(firstExecution == true) 
             { 
              editor.contextMenu.addListener(function(element) { 
               return dataElement; 
              }); 
             firstExecution = false; 
             } 
           } 
          } 
        }); 

        delete editor._.menuItems.paste; 
       }, 
      }); 

Qui "Suggerimenti" è la variabile presente da qualche parte sulla tua pagina contiene un elenco di oggetti con un 'id' e 'etichetta' da mostrare nel suggerimento.

Ora, al fine di configurare questi suggerimenti, si prega di eseguire il seguente codice jQuery, dopo questo, ogni volta che si preme '#', suggerimenti saranno mostrati

$('textarea').ckeditor(); 
CKEDITOR.on('instanceReady', function(evt) { 
     CKEDITOR.instances.contractData.execCommand('reloadSuggetionBox'); 
    }); 

Questo caricherà la CKEditor (contractData è il nome di il mio esempio CKEditor) e configurare il plugin per mostrare suggerimenti attualmente presenti int i "suggerimenti" variabile, in qualsiasi momento è necessario aggiornare/modificare i suggerimenti hai solo bisogno di chiamare questa funzione dopo aver ricaricato "suggerimenti" variabile

CKEDITOR.instances.contractData.execCommand('reloadSuggetionBox'); 

Fammi sapere se si verificano problemi durante il funzionamento.

Trova il plugin scaricabile al mio repo a

http://navalgandhi1989.github.io/ckeditor-autocomplete-suggestions-plugin/