@letsoft/quq-tinymce

TinyMCE plugin for inserting files from QuqManager.

The plugin uses @letsoft/quq-loader, so the QuqManager core is loaded from the CDN when the toolbar button is used.

Browser CDN

The browser build loads TinyMCE, the required TinyMCE plugins, and the QuqManager plugin.

<script type="module">
  import 'https://cdn.letsoft.dev/quq-tinymce/auto.mjs'

  tinymce.init({
    selector: '#editor',
    license_key: 'gpl',
    plugins: 'image link media quqManager',
    toolbar: 'undo redo | bold italic link | image media quqInsertFile',
    object_resizing: true,
    quqManager: {
      apiUrl: 'https://api.example.com',
      apiKey: 'qk_e0d8b6108844297a2dd7514b0b1a6646110192e8',
      multiple: true,
      accept: ['image/*', 'application/pdf', 'audio/*', 'video/*']
    }
  })
</script>
<textarea id="editor"></textarea>

React, Vue, Angular, Next.js

Use the official TinyMCE wrappers and import the auto entrypoint once before rendering the editor.

import { Editor } from '@tinymce/tinymce-react'
import '@letsoft/quq-tinymce/auto'

export function TinyEditor() {
  return (
    <Editor
      licenseKey="gpl"
      init={{
        plugins: 'image link media quqManager',
        toolbar: 'undo redo | bold italic link | image media quqInsertFile',
        object_resizing: true,
        quqManager: {
          apiUrl: 'https://api.example.com',
          apiKey: 'qk_e0d8b6108844297a2dd7514b0b1a6646110192e8',
          multiple: true,
          accept: ['image/*', 'application/pdf', 'audio/*', 'video/*']
        }
      }}
    />
  )
}

Self-hosted TinyMCE fallback

When TinyMCE is bundled from NPM, import TinyMCE's skin and content modules.

import tinymce from 'tinymce'
import 'tinymce/icons/default'
import 'tinymce/themes/silver'
import 'tinymce/models/dom'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/skins/ui/oxide/skin.js'
import 'tinymce/skins/ui/oxide/content.js'
import 'tinymce/skins/content/default/content.js'
import { registerQuqManagerPlugin } from '@letsoft/quq-tinymce'

registerQuqManagerPlugin(tinymce)

tinymce.init({
  selector: '#editor',
  license_key: 'gpl',
  plugins: 'image link media quqManager',
  toolbar: 'undo redo | bold italic link | image media quqInsertFile',
  skin_url: 'default',
  content_css: 'default',
  object_resizing: true,
  quqManager: {
    apiUrl: 'https://api.example.com',
    apiKey: 'qk_e0d8b6108844297a2dd7514b0b1a6646110192e8',
    multiple: true,
    accept: ['image/*', 'application/pdf', 'audio/*', 'video/*']
  }
})

By default:

• images are inserted as <img>;
• video files are inserted as <video class="quq-media quq-media-video" style="width:100%" controls>;
• audio files are inserted as <audio class="quq-media quq-media-audio" style="width:50%;max-width:100%" controls>;
• other files are inserted as links.

Override inserted markup with renderFile(file).

When a user selects inserted media, the plugin shows contextual controls:

• images: native TinyMCE drag resize, plus align left/center/right and resize to 25%, 50%, or 100%;
• videos: native TinyMCE drag resize, plus align left/center/right and resize to 15%, 50%, or 100%;
• audio: align left/center/right and resize to 15%, 50%, or 100%.

Use TinyMCE's image plugin if you also want TinyMCE's built-in image dialog.

The package supports TinyMCE 7 and TinyMCE 8.