CKeditor z autouzupełnieniem?

Question

Czy można w jakiś sposób zaimplementować autouzupełnianie jquery w programie CKeditor? Tworzenie przycisku nie jest takie trudne, ale czy możliwe jest automatyczne wpisywanie tego słowa w autouzupełnianie, a więc kolejne słowo, które jest wpisywane, aż przycisk zostanie naciśnięty ponownie ...?

Ktoś, kto zdalnie coś takiego, proszę dać mi znać. A jeśli nie jest to możliwe, pojawi się okno z wyszukiwaniem autouzupełniania, a następnie kliknij/wybierz, aby dodać wybrany element do tekstu/pozycji kursora cKeditora (może jako link ...)?

Starając się nie wychylaj oczywiście :)

Answer 1

zdalnie zrobiłem coś podobnego, że nie z CKEdit ale z markItUp.

Autouzupełnianie jest wykonywane przez a plugin na podstawie interfejsu użytkownika jQuery.

Miałem problem z włączeniem autouzupełniania w obrębie textarea CKEdit. Następnie odzwierciedliłem lepsze i zmienione wymagania. Wolałem edytora znaczników zamiast edytora WYSIWYG (takiego jak edytor tekstów). Może to nie dotyczy ciebie, ale rozważ także ocenić ten punkt widzenia.

Jeśli możesz zamienić swój tekst WYSIWYG w edytorze znaczników, miłą niespodzianką jest to, że markItUp i wtyczka autouzupełniania grają bardzo dobrze razem. Po prostu ustaw swoje pole tekstowe na markItUp, a następnie włącz autouzupełnianie. Dokumenty markItUp są dobre, nie to samo dotyczy wtyczki. Jest to projekt demonstracyjny.

Answer 2

W celu dokonania pole sugestia, trzeba będzie dokonać niestandardowej wtyczki do korzystania z menu kontekstowego jako pole sugestii, proszę sprawdzić link do podstawowej wiedzy dokonywania wtyczki CKEditor stąd a link

Dodaj ten Twoje config.js autouzupełnianie, gdzie jest nazwa pluginu

config.extraPlugins = 'autocomplete'; 

następnie utworzyć następującą strukturę plików/katalogów w folderze CKEditor

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

umieścić następującą treść w swoim plugin.js złożyć

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

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

Musimy stworzyć atrapę rozpiętość w dokumencie, aby obliczyć aktualną pozycję menu, aby pokazać

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

po obliczeniu pozycja, usuwamy element i wywołujemy metodę, aby wyświetlić sugestie (umieszczone w menu kontekstowym, które są skonfigurowane w kolejnej funkcji).

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

Oto, co wywołuje procesor w edytorze, aby sprawdzić, czy bieżący klucz jest #, czy nie, CKEDITOR.SHIFT + 51 jest kombinacja klawiszy dla #

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

reloadSuggetionBox komenda zostanie wywołana z zewnętrznym jquery do generowania menu zaraz po CKEditor jest gotowy

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

Tutaj "Propozycje" jest zmienna obecna gdzieś na twojej stronie zawiera listę obiektów mających "id" i "etykietę" do pokazania w sugestii.

Teraz w celu skonfigurowania tych sugestii, proszę wykonać następujący kod jquery, po tym, gdy „#” jest wciśnięty, sugestie zostaną pokazane

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

To załadować CKEditor (contractData jest nazwa moje wystąpienie CKEditor) i skonfigurować wtyczkę do pokazania sugestie obecnie występuje int „sugestie” zmienna, zawsze trzeba odświeżyć/zmienić sugestie wystarczy wywołać tę funkcję po przeładunku „wskazówki” zmienna

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

Daj mi znać, jeśli masz jakiś problem z działaniem.

Znajdź pobrania wtyczki w moim repo na

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