Jump to content

InlineCompleteTinyMCE: autocompleter for InputfieldTinyMCE


Recommended Posts

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:




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


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.

  • Like 14
Link to comment
Share on other sites

  • 2 weeks later...
  • 5 months later...
  • 5 months later...
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.

  • Like 2
Link to comment
Share on other sites

  • 8 months later...

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


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

  • Create New...