Jump to content

ProcessMention: "Forum Mentions" style page link autocomplete for CKEditor


BitPoet
 Share

Recommended Posts

Since I was stuck to my flat today I took up a wish and rolled a Process module / CKEditor plugin combo that adds @-autocomplete like the mentions here in the forum to CKEditor fields. It's configurable, but only in module settings for now, the positioning of the select list is quite off and there's still some visual work to be done, so it is in early alpha state.

Nonetheless, if you want to take a look, here it is:
https://github.com/BitPoet/ProcessMention

ProcessMention.thumb.gif.95c93384bdb4430cbfb2be50f34d23ec.gif

 

After installation, you may want to look into the "Additional selector" entry in the module's settings. You will most likely want to limit results to certain templates there.

 

Edit: Updated to version 0.0.30 with fixed positioning of the dropdown.
Edit2: Settings are configurable in field context now. If pwmentions is enabled, the according settings are shown on the "Input" tab.

 

  • Like 14
Link to comment
Share on other sites

@BitPoet,

thank you for your effort. ;)

I tried your ProcessMention module, and it does not work (see below). However, ...

... I could suggest:

  • In the README.md file > Installation, you can add the step "Copy ProcessMention.css and ProcessMention.module from the module folder to the site/modules/InputfieldCKEditor directory.

... I have to say:

  • Rather than querying the server every time via Ajax to get mentions, you could cache the mentions client-side (in a hidden HTML element, local storage or JS config) - credit
  • Of course, the output  (e.g. fix positioning of selection list in plugin.js) is important.

Regarding my issue with the ProcessMention module, when I type the e.g. @Sca text then the Ajax-HTTP request is fired but I get the following Network Headers:

ProcessMention-Network_Headers.jpg.15210dae3568728386b8dadfef57f7e3.jpg

Note: In the image, the gray-covered areas are the path to access the admin of my PW installation.

P.S.: I read the code and I would help someway, but I have to learn a little more about github and the languages. :rolleyes:

 

Link to comment
Share on other sites

@LAPS: thanks for the feedback. I'm not sure how the redirect comes to be and need to ponder that and perhaps run some more tests. What PW version are you on? Do you have languages active?

The positioning issue has meanwhile been fixed.

6 hours ago, LAPS said:

In the README.md file > Installation, you can add the step "Copy ProcessMention.css and ProcessMention.module from the module folder to the site/modules/InputfieldCKEditor directory.

This isn't necessary. The .module and .css file are fine in their own module directory underneath site/modules (and keeping two copies under site/modules is like to lead to trouble). It's just the plugin.js that needs to go into the InputfieldCKEditor/plugins/pwmentions path so both the editor and PW can pick it up.

I'm not sure client side caching is much of an issue, as every keystroke will change the result list and the unfiltered list might be far too long to download. I usually only do that with decent sized lists when I perform client-side filtering.

Link to comment
Share on other sites

@BitPoet The module doesn't remove the mention page on uninstall, it's not found because it's hidden.

If you create it in the getModuleInfo method it will be removed by PW on uninstall.

public static function getModuleInfo() {
	return array(
		...
		"page" => [
			"name" => "mention",
			"title" => "Mention",
			"status" => "hidden"
		]
	);
}

 

Link to comment
Share on other sites

On 22/01/2018 at 6:28 AM, BitPoet said:

I'm not sure how the redirect comes to be and need to ponder that and perhaps run some more tests. What PW version are you on? Do you have languages active?

I am using ProcessWire 3.0.62 and I do not have languages active.

I installed the latest version of ProcessMention, but I continue to get the '301 Moved Permanently' from http://localhost:8888/ADMIN-PATH/mention.

However, if I use http://127.0.0.1:8888/ADMIN-PATH/mention, it seems to work a little more: I get a 200 OK response but the "list of mentions" is not populated because the response code is an entire HTML page (including css, js, etc.).

Link to comment
Share on other sites

@LAPS: I just tested it with a stock 3.0.62 (basic profile) in different browsers and the module works there, so it's likely some leftover / failed cleanup from an older install. Can you uninstall the module in the backend and make sure that you don't have any pages named "mention" in the page tree under Admin? If yes, just delete it manually. Also, please check that you don't have an older module version lying around in the InputfieldCKEditor directory.

Then, best download the very latest version (0.0.70) from the github repo  and install that. Don't forget to copy plugins.js into the correct path, and best clear your browser cache. After installing the module, you should see a page titled "Mention Autocomplete" in the page tree under Admin.

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Installed the module and works out-of-the-box. Thank you very much for providing it!

In my application I use a custom URL field named "link". So I replaced "url" with "link" in the module settings, i.e. in "Returned fields" and "Result template" and "Link template".

Now, the url/link part is not inserted correctly, this is the resulting source:

<a data-pageid="10666" href="[object Object]">@abcde</a></p>

Could you look into this, if time permits? TIA!

Link to comment
Share on other sites

  • 2 weeks later...
On 5/3/2020 at 12:47 PM, HerTha said:

Installed the module and works out-of-the-box. Thank you very much for providing it!

In my application I use a custom URL field named "link". So I replaced "url" with "link" in the module settings, i.e. in "Returned fields" and "Result template" and "Link template".

Now, the url/link part is not inserted correctly, this is the resulting source:


<a data-pageid="10666" href="[object Object]">@abcde</a></p>

Could you look into this, if time permits? TIA!

Hi HerTha, sorry I couldn't respond sooner. This looks like the "link" field is a page field, am I right there? In that case, it doesn't work right now as you'd need something like "link->url" in the mention columns, which isn't supported yet. Only direct properties of the found pages can be used. I'm going to meditate on it, but I can't promise a quick solution.

Link to comment
Share on other sites

  • 9 months later...

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