Skip to content

[4.0] Added additional TinyMCE 5 configuration option for "external_plugins"#25734

Merged
wilsonge merged 4 commits intojoomla:4.0-devfrom
martyf:4.0-tinymce-enhancements
Aug 13, 2019
Merged

[4.0] Added additional TinyMCE 5 configuration option for "external_plugins"#25734
wilsonge merged 4 commits intojoomla:4.0-devfrom
martyf:4.0-tinymce-enhancements

Conversation

@martyf
Copy link
Copy Markdown
Contributor

@martyf martyf commented Jul 29, 2019

Summary of Changes

Added support for Tiny's "external_plugins" configuration option. This has been done using a repeatable pairing of plugin names and paths.

External Plugins allow developers to use their own custom plugins, that live outside of Tiny's source folders, to help improve the content author's experience through adding of new tasks or custom workflows. They really open up the potential for developers to more easily integrate their own plugins with Joomla 4, especially given the power of what TinyMCE 5 can do.

Using this option is 100% optional. There is no loss of functionality if this configuration option is not set by the administrator.

Testing Instructions

Build and install Joomla from the source as per usual.

When editing the TinyMCE Editor Plugin, a new field is available at the bottom of the main "Plugin" screen. This allows external plugins to be added at a per-set basis.

If used, the plugin's button can be added (albeit crudely) to the toolbar by using the Custom Button option.

You can get the source for a trivial plugin at:
https://github.com/martyf/tiny-plugin-helloworld

Steps to implement are:

  1. Place the plugin JS file somewhere (could vary based on how the dev wants to set it all up - for example, "/tiny-plugins/helloworld.js"
  2. Go to the Joomla 4 Admin, and TinyMCE Plugin settings, and select the Set (such as 0 for Admin). Enter a new External Plugin (bottom):
  • Name: helloworld
  • Path: /tiny-plugins/helloworld.js
  1. In "custom buttons", enter the plugin button - in this case, helloworld.
  2. Create an Article, and you should see a "Hello Button" in the Tiny toolbar
  3. Click the button to trigger the plugin - this is a totally trivial example that demonstrates what Tiny 5 can do with its UI Components library (new with v5) - select an option, and on selecting it, will insert the markup. Totally trivial, but is an example plugin.

It is also worth checking that when you have no external plugins configured, the editing process still works. You can:

  1. Remove the External Plugin configuration from the TinyMCE Plugin settings, and remove from "Custom Buttons", then Save and Close.
  2. Create/Edit an Article, and the editor loads without error or warning.

Documentation Changes Required

TinyMCE editor plugin documentation needs to be updated.

(added by @richard67)

Added an optional field for a Tiny Cloud API key. When used, will load the cloud version of TinyMCE rather than the self-hosted version. See “Tiny Cloud” tab in Plugin settings.

At the same time, also added support for external plugins. This has been done using a repeatable pairing of plugin names and paths. See “External Plugins” tab in Plugin settings.

These were both done outside of the main options so that they can be globally applied to all configuration sets.

Signed-off-by: Marty Friedel <1491079+martyf@users.noreply.github.com>
@joomla-cms-bot joomla-cms-bot added Language Change This is for Translators PR-4.0-dev labels Jul 29, 2019
@brianteeman
Copy link
Copy Markdown
Contributor

brianteeman commented Jul 29, 2019

Thanks for creating this.

My 10c personal opinion is that we should not accept this PR on principal. It is providing direct support for a commercial product that is not GPL (or compatible). In addition the terms of the subscription agreement for tiny.cloud are very restrictive of my freedom to use the software. (see https://about.tiny.cloud/legal/tiny-cloud-services-subscription-agreement/)

There is nothing wrong with this being an addon listed on the JED but for me it goes against our core values.

@martyf
Copy link
Copy Markdown
Contributor Author

martyf commented Jul 29, 2019

Not necessarily - even the cloud version of Tiny provides the latest build (where new free features are added) where as the included version needs to be updated separately. There is no cost to use an API key with Tiny Cloud - just for premium plugins, if wanted. But I do get where you're coming from too.

What about for external plugin support? This would really open up potential to help do more with the core editor in J4.

Happy to do a separate PR for just that change if you like.

@brianteeman
Copy link
Copy Markdown
Contributor

@martyf no cost is not the same as GPL (or compatible). Your Terms ((see https://about.tiny.cloud/legal/tiny-cloud-services-subscription-agreement/) are explicit that it is not opensource and that it restricts my usage.

As for the custom plugins - dont we already have that possibility

@martyf
Copy link
Copy Markdown
Contributor Author

martyf commented Jul 29, 2019

I’m not from Tiny, so not my terms. I’m just a developer who uses their product.

The current external plugins don’t give enough flexibility for plugins in different locations. These need a path to load correctly as it gives greater flexibility with where to store the plugin source within the folder structure. The “Externals Plugins” feature here resolves that.

@brianteeman
Copy link
Copy Markdown
Contributor

I’m not from Tiny, so not my terms. I’m just a developer who uses their product.

Sorry I put two and two together from your location and made five

The current external plugins don’t give enough flexibility for plugins in different locations

Can you give a concrete example please

@ghost ghost changed the title Added additional TinyMCE 5 configuration options [4.0] Added additional TinyMCE 5 configuration options Jul 29, 2019
@martyf
Copy link
Copy Markdown
Contributor Author

martyf commented Jul 29, 2019

Basically if I make my own plugin (to do anything) I need to load an external JS file. This is done using Tiny’s “external_plugins” option.

The “plugins” option, which is currently used, looks in the Tiny plugins directory - so basically plugins that are core to Tiny. “external_plugins” allows me to load a plugin that doesn’t exist in that directory.

@brianteeman
Copy link
Copy Markdown
Contributor

OK so can you please remove the tiny.cloud part of this PR so its just for the plugins and if possible provide a link to a sample plugin for testing purposes

@ghost
Copy link
Copy Markdown

ghost commented Jul 29, 2019

I support Brian position on GPL that it goes against our core values.

@martyf
Copy link
Copy Markdown
Contributor Author

martyf commented Jul 29, 2019

Can do. Did you want a new PR or update this one?

@brianteeman
Copy link
Copy Markdown
Contributor

You can just update this one

Signed-off-by: Marty Friedel <1491079+martyf@users.noreply.github.com>
@dgrammatiko
Copy link
Copy Markdown
Contributor

@martyf I think you need to move the fieldset/fields to plugins/editors/tinymce/form/ so that the plugins are available per group not globally. @Fedik am I right on this one?

@martyf
Copy link
Copy Markdown
Contributor Author

martyf commented Jul 29, 2019

PR updated and removed references to Tiny Cloud.

Example external plugin at:
https://github.com/martyf/tiny-plugin-helloworld

To use:

  1. Place the plugin JS file somewhere (could vary based on how the dev wants to set it all up - for example, "/tiny-plugins/helloworld.js"
  2. Go to the Joomla 4 Admin, and TinyMCE Plugin settings. On the "External Plugins" tab, create a new entry for the repeatable with:
  • Name: helloworld
  • Path: /tiny-plugins/helloworld.js
  1. On the main Plugin tab, select Set 0 (i.e. the Set for standard admin users), and on "custom buttons", enter the plugin button - in this case, helloworld.
  2. Create an Article, and you should see a "Hello Button" in the Tiny toolbar
  3. Click the button to trigger the plugin - this is a totally trivial example that demonstrates what Tiny 5 can do with its UI Components library (new with v5) - select an option, and on selecting it, will insert the markup. Totally trivial, but is an example plugin.

@martyf
Copy link
Copy Markdown
Contributor Author

martyf commented Jul 29, 2019

@dgrammatiko I was thinking that too but then means its very repetitive in its setup - the other thought I had would be to only add the path to the configuration if the button was added to one of the toolbars. That's probably a friendlier setup where the external plugins are configured once, and only called when needed.

Thoughts?

EDIT
Actually that won’t work - some plugins don’t need a button to be triggered (can be done by a keyboard trigger for example).

Will have to be moved to the setoptions.xml file and configured per set.

I’ll get that done and update the PR.

Allows for plugin configuration on a per-set basis.

Signed-off-by: Marty Friedel <1491079+martyf@users.noreply.github.com>
@martyf
Copy link
Copy Markdown
Contributor Author

martyf commented Jul 29, 2019

Revision made that has moved the External Plugins config to the setoptions.xml file for per-set configuration.

See above for an example (trivial) plugin.

Steps to implement are:

  1. Place the plugin JS file somewhere (could vary based on how the dev wants to set it all up - for example, "/tiny-plugins/helloworld.js"
  2. Go to the Joomla 4 Admin, and TinyMCE Plugin settings, and select the Set (such as 0 for Admin). Enter a new External Plugin (bottom):
  • Name: helloworld
  • Path: /tiny-plugins/helloworld.js
  1. In "custom buttons", enter the plugin button - in this case, helloworld.
  2. Create an Article, and you should see a "Hello Button" in the Tiny toolbar
  3. Click the button to trigger the plugin - this is a totally trivial example that demonstrates what Tiny 5 can do with its UI Components library (new with v5) - select an option, and on selecting it, will insert the markup. Totally trivial, but is an example plugin.

@richard67
Copy link
Copy Markdown
Member

@martyf After you have removed the cloud stuff, you should update the "Summary of Changes" section at the top of the description of this pull request (PR) accordingly, because it still tells about the cloud. Maybe you should also copy the instructions in your last comment to the "Testing Instructions" section in the description of this PR, so testers (it needs 2 good tests for every PR) can easily find what has been done and how it has to be tested.

@martyf martyf changed the title [4.0] Added additional TinyMCE 5 configuration options [4.0] Added additional TinyMCE 5 configuration option for "external_plugins" Jul 29, 2019
@martyf
Copy link
Copy Markdown
Contributor Author

martyf commented Jul 29, 2019

All done, @richard67

@richard67
Copy link
Copy Markdown
Member

@martyf The TinyMCE Editor plugin in J4 has already a field "Custom plugin". Is your External Plugin something else?

@richard67
Copy link
Copy Markdown
Member

I mean what's the difference between the existing and the new field?

@brianteeman
Copy link
Copy Markdown
Contributor

@richard67
Copy link
Copy Markdown
Member

@brianteeman Thanks, I understand now. But it seems the new functionality includes the old one, i.e. with the new option you can do what could be done with the old option and more, so should not the old field be replaced by the new field instead of having both fields? What do you think? Or are the 2 kinds of plugins for TinyMCE different?

@richard67
Copy link
Copy Markdown
Member

Ok, I just read all above and understand that with this PR, the plugins can be located anywhere outside the TinyMCE path. Is that the only difference to the existing custom plugins?

@martyf
Copy link
Copy Markdown
Contributor Author

martyf commented Jul 30, 2019

@richard67 that is correct, external_plugins allows plugins located outside of the Tiny source folder to be loaded.

The Custom Plugins option that exists already is populating the "plugins" config option for Tiny, which is used to load plugins that come packaged with Tiny (but are not necessarily loaded).

Both options need to remain as they do different things - both load plugins, but one loads core where as one loads external.

@richard67
Copy link
Copy Markdown
Member

@martyf One final question before I test (or suggest a change, depends on your answer): The path, is that either an absolute or relative path on the server, like I assume? Or can it also be a URL? I've tried with URL, too, because the label "External Plugin URLs" made me think so, but am URL did not work.

@martyf
Copy link
Copy Markdown
Contributor Author

martyf commented Jul 30, 2019

It can be a web-accessible path (absolute or relative) to a file in the Joomla folder structure (such as a new folder for Tiny plugins, or could even be built and installed as a Joomla plugin too.

It can also be a URL to another server - assuming it is configured to allow cross domain requests.

@richard67
Copy link
Copy Markdown
Member

I just saw I made a mistake when testing URL. It works. Was not related to cross-domain.

@richard67
Copy link
Copy Markdown
Member

I have tested this item ✅ successfully on 041ca42


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/25734.

@richard67
Copy link
Copy Markdown
Member

@martyf I've added a section about required documentation changes to the description of this PR. The section is also part of our pull request template.

@martyf
Copy link
Copy Markdown
Contributor Author

martyf commented Jul 30, 2019

Is there something you wanted me to do to help with that?

@richard67
Copy link
Copy Markdown
Member

Well jdoc is a wiki, so if you want, you can sign up there and change the documentation after this PR will be merged. But if not, other jdoc contributors can do that, too.

@richard67
Copy link
Copy Markdown
Member

But maybe I am wrong, am not familiar with the docs and if the help is handled differently. Maybe @brianteeman knows that better.

Co-Authored-By: Quy <quy@fluxbb.org>
@wilsonge wilsonge merged commit 0fef8e7 into joomla:4.0-dev Aug 13, 2019
@wilsonge
Copy link
Copy Markdown
Contributor

Thanks!

@zero-24 zero-24 added this to the Joomla 4.0 milestone Aug 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants