Ckeditor con autocompletar?

Question

¿Es posible implementar jquery autocompletar de alguna manera en ckeditor? Crear un botón no es tan difícil, pero ¿es posible configurarlo para que se autocomplete, por lo que la siguiente palabra que se escribe hasta que se vuelva a presionar el botón ...?

Cualquiera, que remotamente hizo algo así, por favor avíseme. O si eso no es posible, una ventana emergente de una búsqueda autocompletada, y luego al hacer clic/seleccionar agregaría ese elemento seleccionado a ckeditor textarea/posición actual del cursor (¿quizás como un enlace ...)?

Intentando no se extienda demasiado por supuesto :)

Answer 1

hice remotamente algo similar que, no con CKEdit pero con markItUp.

El trabajo de autocompletar se realiza por a plugin basado en jQuery UI.

Tuve el problema de integrar autocompletado dentro de un área de texto CKEdit. Luego reflexioné mejor y cambié los requisitos. Prefería un editor de marcado en lugar del editor WYSIWYG (procesador de texto). Tal vez esto no se aplique a usted, pero considere evaluar este punto de vista también.

Si puede convertir su cuadro de texto wysiwyg en el editor de marcas, la agradable sorpresa es que markItUp y el complemento de autocompletar funcionan muy bien juntos. Simplemente configure su área de texto para markItUp, luego habilite la función autocompletar. markItUp docs es bueno, no es lo mismo para el plugin. Para ello hay un proyecto de demostración.

Answer 2

Con el fin de hacer un buzón de sugerencias, que tendrá que hacer su complemento personalizado para utilizar el menú contextual como buzón de sugerencias, por favor, consulte el enlace de los conocimientos básicos de hacer plugin de CKEditor de aquí a link

Añadir esta a sus config.js, donde autocompletar es el nombre del plugin

config.extraPlugins = 'autocomplete'; 

a continuación, cree una estructura de directorio/archivo siguiente en la carpeta CKEditor

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

colocamos los siguientes contenidos en sus plugin.js archivo

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

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

Tendremos que crear un lapso de maniquí en el documento para calcular la posición actual del menú que se muestra

      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(); 

Después del cálculo la posición, eliminamos el elemento y llamamos al método para mostrar las sugerencias (colocadas en el menú contextual, que están configuradas en la siguiente función)

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

Aquí está el editor de enlace del oyente para verificar si la clave actual es # o no, CKEDITOR.SHIFT + 51 es la combinación de teclas para #

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

reloadSuggetionBox comando se llama desde su jQuery externa para generar el menú justo después de la CKEditor está listo

    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; 
       }, 
      }); 

Aquí "sugerencias" se la variable presente en algún lugar de su página contiene una lista de objetos que tienen un 'id' y 'etiqueta' para mostrarse como sugerencia.

Ahora con el fin de configurar estas sugerencias, por favor, realice el siguiente código de jQuery, después de esto, cada vez que se pulsa '#', sugerencias serán mostrados

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

Esto cargará el CKEditor (contractData es el nombre de mi ejemplo CKEditor) y configurar el plugin para mostrar sugerencias actualmente presentes int las "sugerencias" variables, cada vez que necesite para actualizar/cambiar las sugerencias sólo tiene que llamar a esta función después de cargar de "sugerencias" variable de

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

Avísame si tienes algún problema para que funcione.

Encuentra el plugin descargable en mi repo en

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