module Generic, extensible Autocomplete for InputfieldCKEditor

[BitPoet]

After building the ProcessMentions module and another autocomplete module for images, I found that I am going to need even more of these, but things were going to get repetitive. So I refactored the whole thing into a basic autocompletion module and individual "actions".

The result is Autocomplete for CKEditor (GitHub).

To try out,

• Install the module and actions
  
   
• Enable actions in the settings of any CKEditor field
  
   
• Edit a page with this field, type "@" and some characters for the  and enjoy
  

There are still a few things I need to implement. ATM, it only supports single characters as triggers for the autocomplete. I'd like to change that to combinations so I don't run out of special characters at some point. I also have to add a few more configuration options (like search only at the beginning or also in the middle of the searched string). The documentation for custom styling also needs some work.

I have tried to keep things generic. Implementing your own actions should be quite straight forward. The README at GitHub illustrates the main steps and the supplied action classes have inline documentation. I would love to get some feedback or even see some third party InlineCompleteAction implementations.

[lokomotivan]

This seem exactly what i need at this moment, especially for hanna :), will try it out definitely, thank you!

[lokomotivan]

Just installed it, first thing i noticed that it doesn't work with custom hanna tags, works with "[[", but not with custom one "{{" i currently use for hanna codes 

[BitPoet]

Thanks for pointing that out. I never changed that setting in production, so I didn't think of that. The latest github master (0.1.4) now uses the settings defined in TextformatterHannaCode's config both when inserting the pattern and as the trigger for autocompletion.

[Macrura]

this is working really well for inserting images, audio players and videos from a central media library, inline into ck editor. It saves so much time since it is so fast to insert the page reference to the media item... and i can just intercept my custom insert templates and replace with the video player popup, or audio player (soundmanager2), or responsive image...

[bernhard]

On 8/31/2018 at 2:46 AM, Macrura said:

this is working really well for inserting images, audio players and videos from a central media library, inline into ck editor. It saves so much time since it is so fast to insert the page reference to the media item... and i can just intercept my custom insert templates and replace with the video player popup, or audio player (soundmanager2), or responsive image...

Hey @Macrura could you maybe add some screenshots or short screencasts as a little inspiration how you are using this module? ? 

@BitPoet thx for the module! Just tried it and it works great. Could you please consider showing all available results as default if no character is typed? At the moment it shows the "loading" animation but it seems to do nothing until you type any letter:

I think it would be better if the dropdown showed "admin" or "hello_world" right from the beginning, because if users do not remember the correct word of a hanna code they could simply type [[ and choose it from the list of available options.

[Macrura]

@bernhard

i have 3 custom  CkInlineActions, 2 are for selecting pages from a central media library that stores images, video, audio, and embeds. The other selects musical works from a list of works (pages).

The editors can insert a link to any work without having to use page list select; this is pretty much essential, as using the page list select to find a record among hundreds would be too time consuming.

(1) Insert link to work, the user types @ and then the first characters of the title...

(2) Insert a shortcode to display a video or image (uses Ui-kit lightbox); The shortcodes are processed by a custom textformatter that does the replacements.

to insert a video the users type ~v and then the module just shows all of the videos; you don't need to type the title of the video, as the behavior of the module in terms of how it displays results is based on how you setup your CkInline action. To  insert an image they type ~i.

Example of the shortcode that is generated by the inline action:

[Didier B.]

This module is exactly what i'm looking for! It works perfectly within a regular Textarea CKEditor field. Is it possible to get this module also working in a Textarea Rich Text (CKEditor) field within a ProFields: Table field?