QuqManager documentation

import { QuqManager } from '@letsoft/quq-loader'

await QuqManager.open({
  apiUrl: 'http://localhost:3000',
  apiKey: 'qk_test_project_key',
  multiple: true,
  onSelect(files) {
    console.log(files)
  }
})

import { Alignment, Bold, ClassicEditor, Essentials, Image, ImageCaption, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, Italic, Paragraph, Undo } from 'ckeditor5'
import { QuqManagerPlugin } from '@letsoft/quq-ckeditor5'

ClassicEditor.create(document.querySelector('#editor'), {
  licenseKey: 'GPL',
  plugins: [Essentials, Paragraph, Bold, Italic, Undo, Alignment, Image, ImageCaption, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, QuqManagerPlugin],
  toolbar: ['undo', 'redo', '|', 'bold', 'italic', '|', 'alignment', '|', 'quqInsertFile'],
  image: {
    toolbar: [
      'imageTextAlternative',
      'toggleImageCaption',
      '|',
      'imageStyle:inline',
      'imageStyle:alignLeft',
      'imageStyle:alignCenter',
      'imageStyle:alignRight',
      '|',
      'resizeImage'
    ],styles: {
  options: ['inline', 'alignLeft', 'alignCenter', 'alignRight']
},
    resizeOptions: [
      { name: 'resizeImage:original', value: null, label: 'Original' },
      { name: 'resizeImage:15', value: '15', label: '15%' },
      { name: 'resizeImage:50', value: '50', label: '50%' },
      { name: 'resizeImage:100', value: '100', label: '100%' }
    ]
  },
  alignment: {
    options: ['left', 'center', 'right']
  },
  quqManager: {
    apiUrl: 'http://localhost:3000',
    apiKey: 'qk_test_project_key',
    multiple: true,
    accept: ['image/*', 'application/pdf', 'audio/*', 'video/*'],
    videoToolbar: ['quqVideoResize15', 'quqVideoResize50', 'quqVideoResize100']
  }
})

import '@letsoft/quq-tinymce/auto'
import type tinymce from 'tinymce'

declare global {
  interface Window {
    tinymce: typeof tinymce
  }
}

window.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: 'http://localhost:3000',
    apiKey: 'qk_test_project_key',
    multiple: true,
    accept: ['image/*', 'application/pdf', 'audio/*', 'video/*'],
    imageToolbar: 'quqalignleft quqaligncenter quqalignright | quqimageresize25 quqimageresize50 quqimageresize100',
    videoToolbar: 'quqalignleft quqaligncenter quqalignright | quqvideoresize15 quqvideoresize50 quqvideoresize100',
    audioToolbar: 'quqalignleft quqaligncenter quqalignright | quqaudioresize15 quqaudioresize50 quqaudioresize100'
  }
})

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: {
      apiUrl: 'http://localhost:3000',
      apiKey: 'qk_test_project_key',
      multiple: true,
      accept: ['image/*', 'application/pdf', 'audio/*', 'video/*']
    }
  }
})

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { QuqManager } from '@letsoft/quq-tiptap'
import './styles.css'

const editor = new Editor({
  element: document.querySelector('#editor')!,
  extensions: [
    StarterKit,
    QuqManager.configure({
      apiUrl: 'http://localhost:3000',
      apiKey: 'qk_test_project_key',
      multiple: true,
      accept: ['image/*', 'application/pdf', 'audio/*', 'video/*']
    })
  ],
  content: '<p>Select a file from QuqManager to test media alignment and resize controls.</p>'
})

document.querySelector('[data-action="bold"]')?.addEventListener('click', () => {
  editor.chain().focus().toggleBold().run()
})

document.querySelector('[data-action="italic"]')?.addEventListener('click', () => {
  editor.chain().focus().toggleItalic().run()
})

document.querySelector('[data-action="quq"]')?.addEventListener('click', () => {
  editor.chain().focus().run()
  editor.commands.openQuqManager()
})