uploadcare / uploadcare-tinymce

File Uploader by Uploadcare

This is a plugin for TinyMCE, a WYSIWYG HTML editor, providing it for working with Uploadcare Widget.

The plugin allows TinyMCE users to upload media from their devices, social media, cloud storage, and more. All that without any backend code that's usually required to handle uploads.

 

• Demo
• Requirements
• Install
• Usage
• Configuration
  • Plugin configuration
  • Widget configuration
• Security issues
• Feedback

Demo

• TinyMCE 6.x demo.
• TinyMCE 5.x demo.
• TinyMCE 4.x demo.

Requirements

Supported TinyMCE versions: 6.x, 5.x and 4.x.

Install

Download the latest plugin archive from the release branch or releases page.

Extract the downloaded archive to the plugin directory of your TinyMCE installation.

Another option here is cloning the repo:

git clone -b release [email protected]:uploadcare/uploadcare-tinymce.git plugins/uploadcare

• [email protected] - compatible with TinyMCE 6.x
• uploadcare.tinymce - compatible with TinyMCE 4.x and 5.x

Usage

Add uploadcare to the list of your TinyMCE plugins and the toolbar. Set your public key. Public keys are used to identify a target Uploadcare project your uploads will go to.

tinymce.init({
  selector: '#editor',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  external_plugins: {
    uploadcare: '/path/to/uploadcare/plugin.js',
  },
  // options example for 6.x
  uploadcare: {
    publicKey: 'YOUR_PUBLIC_KEY'
  }
  // options example for 4.x and 5.x
  uploadcare_public_key: 'YOUR_PUBLIC_KEY',
})

Configuration

Plugin configuration

To apply a custom configuration, initialize the TinyMCE editor providing additional options.

Here is example for TinyMCE 6.x:

tinymce.init({
  selector: '#editor',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  external_plugins: {
    uploadcare: '/path/to/uploadcare/plugin.js',
  },
  uploadcare: {
    publicKey: 'YOUR_PUBLIC_KEY',
    /* when handling images, you can resize them on a client to save bandwidth */
    imageShrink: '500x375',
    /* allow multi-file uploads */
    multiple: true,
    multipleMax: 3,
    /* set crop options when handling images */
    crop: '1:1,4:3',
    /* feel free to add more options here */
  }
})

Example for TinyMCE 4.x and 5.x:

tinymce.init({
  selector: '#editor',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  external_plugins: {
    uploadcare: '/path/to/uploadcare/plugin.js',
  },
  uploadcare_public_key: 'YOUR_PUBLIC_KEY',
  /* when handling images, you can resize them on a client to save bandwidth */
  uploadcare_image_shrink: '500x375',
  /* allow multi-file uploads */
  uploadcare_multiple: true,
  uploadcare_multiple_max: 3,
  /* set crop options when handling images */
  uploadcare_crop: '1:1,4:3',
  /* feel free to add more options here */
})

You can use any widget options providing those as object keys. Just add the uploadcare_ prefix and use snake_case instead of camelCase in option names, e.g. imagesOnly → uploadcare_images_only.

Widget configuration

Uploadcare Widget can be deeply customized to suit your UX/UI. You can define allowed upload sources, implement file validation, and more.

Use our live widget sandbox as a starting point and consider checking out the docs on widget configuration and its JavaScript API.

Effects Tab

To enable Effects Tab for Uploadcare Widget, you need to add init_instance_callback callback to the options of TinyMCE's init method with the following code:

tinymce.init({
  selector: '#editor',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  external_plugins: {
    uploadcare: '/path/to/uploadcare/plugin.js',
  },
  init_instance_callback: function() {
    window.UPLOADCARE_EFFECTS = 'crop,rotate,mirror';

    function onSuccess() {
      uploadcare.registerTab('preview', uploadcareTabEffects)
    }

    tinymce.ScriptLoader.add('https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.js', onSuccess)
    tinymce.ScriptLoader.loadQueue()
  }
})

Security issues

If you think you ran into something in Uploadcare libraries which might have security implications, please hit us up at [email protected] or Hackerone.

We'll contact you personally in a short time to fix an issue through co-op and prior to any public disclosure.

Feedback

Issues and PRs are welcome. You can provide your feedback or drop us a support request at [email protected].

uploadcare-tinymce's Issues

Loading Uploadcare twice

Describe the bug

When using the tinyMCE 6.x plugin on a page where the Uploadcare widget is also loaded for another element on the same page, the JS is loaded twice. This results in duplicated upload buttons.

1. Add a normal Uploadcare widget to the page.
2. Load the tinyMCE plugin
3. Notice that the Upload button is duplicated.

Expected behavior

The JS isn't loaded again in the tinyMCE module if already available on the page.

Code / screenshots

Environment

• Library version: 3.x
• Language/framework version: tinyMCE 6.x
• OS version: Windows 11 / Chrome

Update for TinyMCE 5

Get the following error with tinymce 5:
Failed to initialize plugin: uploadcare Error: editor.addButton has been removed in tinymce 5x, use editor.ui.registry.addButton or editor.ui.registry.addToggleButton or editor.ui.registry.addSplitButton instead

Support for TinyMCE 6.0

Hi,

Just curious to know if there are plans to support this plugin for TinyMCE 6.0?
If, so. Wondering, if any timeline is available?

Thanks

Edit previously uploaded images

Hello, I'm interested in finding a way to re-edit a file that has already been uploaded with the tinyMCE plugin. That is, if I click on an image in tinyMCE that was previously uploaded using the plugin, I would like to be able to bring up the uploadcare dialog again to adjust the cropping, for example.

Is there a possibility of adding this functionality? Or could you point me in the right direction as to how I might implement this feature?

Thank you.

Files

Hello, I downloaded the folder and extracted into my tinymce/plugins folder, updated the config.js file with my uploadcare public key and added the plugin button into my tinymce config.

However, it appears an error of "Failed to load: /thirdparty/tinymce/plugins/uploadcare/plugin.min.js". This file doesnt exist in the repository.

Also, when I extracted I noticed that the uploadcare-php file is empty.

Indeed, is there any way to already update the code to newer versions of uploadcare?

Thank you very much