Jump to content

Generic, extensible Autocomplete for InputfieldCKEditor


BitPoet
 Share

Recommended Posts

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
    ProcessCKInlineComplete_install_2.png.dbb5a539292cbe72e323d320ab4d670a.png
     
  • Enable actions in the settings of any CKEditor field
    ProcessCKInlineComplete_user_action.png.bf8404401e10fbb65adb3ae6342d08dd.png
     
  • Edit a page with this field, type "@" and some characters for the  and enjoy
    ProcessCKInlineComplete_editing.thumb.gif.8fd15db4b1507c255985192ad30ede69.gif

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.

  • Like 14
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

  • 5 months later...

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...

  • Like 3
Link to comment
Share on other sites

  • 9 months later...
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:

demo.gif.0ed45ce7ea1ce739233fca091480e8f0.gif

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.

  • Like 1
Link to comment
Share on other sites

@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...

select-work.jpg.a650e6ca341562e6ce89a507e40f0aa8.jpg

(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.

select-video1.thumb.png.77baeaf9b8652c293f81db61f12bf4f1.png

select-image.jpg.a5d267a102f17e9f853a0eef19df548b.jpg

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

shortcode.jpg.1487e17a708e671d7cc371e4b9f767ba.jpg

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

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?

1181356808_Schermafbeelding2021-05-26om16_43_24.thumb.png.2a345addf9f3fb168b17c44754b36cae.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...