@letsoft/quq-quill

Quill 2 module for inserting files from QuqManager.

Current package version: 1.0.9.

import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import { registerQuqManagerModule } from '@letsoft/quq-quill'

registerQuqManagerModule(Quill)

new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic'],
      [{ align: [] }],
      ['quqInsertFile']
    ],
    quqManager: {
      apiKey: 'qk_test_project_key',
      multiple: true,
      accept: ['image/*', 'application/pdf', 'audio/*', 'video/*']
    }
  }
})

The module uses @letsoft/quq-loader to open the CDN file manager. Images, audio, video, and regular files use QuqManager blots.

apiUrl is optional for managed QuqManager projects and defaults to the platform API. Pass it only when connecting to a self-hosted API:

quqManager: {
  apiUrl: 'https://files.example.com/api',
  apiKey: 'qk_project_key'
}

Media behavior

• Images are inserted as selectable media blocks with contextual alignment, 15%, 50%, and 100% quick-size controls.
• Audio is inserted at 50% width by default. Selecting or hovering the audio block shows contextual alignment, quick-size controls, and draggable side/corner resize handles.
• Video is inserted at 100% width by default. Selecting or hovering the video block shows the same contextual controls and resize handles, capped at 100% width.
• The contextual toolbar is positioned automatically. If the media block is the first element in the editor and there is no room above it, the toolbar opens below the block.

Media options

new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [['bold', 'italic'], [{ align: [] }], ['quqInsertFile']],
    quqManager: {
      apiKey: 'qk_test_project_key',
      mediaToolbar: true,
      mediaResizer: true,
      mediaToolbarItems: ['left', 'center', 'right', '15%', '50%', '100%']
    }
  }
})

Set mediaToolbar to false to hide the contextual toolbar. Set mediaResizer to false to disable drag handles.

License

MIT © LetSoft. See LICENSE.