module InlineCompleteTinyMCE: autocompleter for InputfieldTinyMCE

[BitPoet]

Since InputfieldTinyMCE appears to make huge steps towards becoming a stable replacement for CKEditor and TinyMCE comes with a native autocomplete API, I just had to try my hands at migrating the autocomplete module I had built for InputfieldCKEditor. Lo and behold, it went even easier than I had hoped.

So here - mind you, still very alpha - is my autocomplete module for the new TinyMCE input field. Since I may still introduce breaking changes while things become stable, it will only be available at GitHub for now.

Autocompleter for InputfieldTinyMCE

What does it do?

Autocompleters work like the mention plugin in this forum. You type a "trigger" character (or characters) followed by some letters, and a list of possible results pops up, from which you can choose.

InlineCompleteTinyMCE comes with three different autocompleters (called "actions" in the context of this module):

• Pages: you can configure a selector, just like when you search for pages in the ProcessWire backend. You can search for title, name or any field you would like. Like every action, it allows you to specify templates for the label and the HTML/text to insert.
• Users: this is the equivalent to the form mention. Type an "@" sign followed by the start of a user name, and it inserts a link to that user. If you have added an image field to the user template, you can display that in the selection popup too.
• Hanna Code: just type the opening tag ("[[" by default) for your Hanna code and any letter, and the module will look for all codes starting with those letters.

You can easily implement your own action modules too. Just inherit from InlineCompleteTinyMCEAction and add the code for a few methods.

Enabling Actions

For every installed action, you will find a checkbox on the "Input" tab when you configure a field.

Configuration for Actions

Once you have enabled the action, more configuration options become visible. The exact options depend on the action itself, but you usually have a label template and a value template. You can use placeholders in both.

Actions in Action

This is what it looks like when used:

Compatiblity

The module has been tested with InputfieldTinyMCE v6.0.6 both in standalone and inline mode. Lazy loading the standalone editor is also supported.

Outlook

There's still a bit work waiting for me, from cleaning up some code, over making the Pages action support multiple autocompleters with different triggers and selectors, to adding a lot of documentation.

Nevertheless, I'd be happy to get some feedback.

[Fuzen]

Love it. Thanks!

[Mats]

Thanks  @BitPoet , this is really neat!

Would it be possible to make it work in repeater matrix fields? 

 

[lpa]

Testing this module with PW 3.0.229 but nothing happens. This error in error-log:
Missing GET parameters for ProcessInlineCompleteTinyMCE::execute (WireLog)

 

[BitPoet]

On 10/1/2023 at 9:01 PM, lpa said:

Testing this module with PW 3.0.229 but nothing happens. This error in error-log:
Missing GET parameters for ProcessInlineCompleteTinyMCE::execute (WireLog)

Sorry for that, seems the last commit was incomplete. Version 0.0.4 is on GitHub now and was tested with 3.0.229.

[Didjee]

Hi @BitPoet, I was wondering if it is possible to get this module working in a Textarea Rich Text (TinyMCE) field within a ProFields: Table field?
Now I'm getting the error messages below in TracyAdmin. The Table field 'table_directives' has 3 rows with 2 TinyMCE Textarea fields ('medication' and 'remarks') per row.

PHP Warning: Attempt to read property "table_directives_0_medication__pages__useAction" on null in .../InlineCompleteTinyMCE/ProcessInlineCompleteTinyMCE.module:267
PHP Warning: Attempt to read property "table_directives_0_remarks__pages__useAction" on null in .../InlineCompleteTinyMCE/ProcessInlineCompleteTinyMCE.module:267
PHP Warning: Attempt to read property "table_directives_1_medication__pages__useAction" on null in .../InlineCompleteTinyMCE/ProcessInlineCompleteTinyMCE.module:267
PHP Warning: Attempt to read property "table_directives_1_remarks__pages__useAction" on null in .../InlineCompleteTinyMCE/ProcessInlineCompleteTinyMCE.module:267
PHP Warning: Attempt to read property "table_directives_2_medication__pages__useAction" on null in .../InlineCompleteTinyMCE/ProcessInlineCompleteTinyMCE.module:267
PHP Warning: Attempt to read property "table_directives_2_remarks__pages__useAction" on null in .../InlineCompleteTinyMCE/ProcessInlineCompleteTinyMCE.module:267
PHP Warning: Attempt to read property "table_directives_3_medication__pages__useAction" on null in .../InlineCompleteTinyMCE/ProcessInlineCompleteTinyMCE.module:267
PHP Warning: Attempt to read property "table_directives_3_remarks__pages__useAction" on null in .../InlineCompleteTinyMCE/ProcessInlineCompleteTinyMCE.module:267