@letsoft/quq-ckeditor5

CKEditor 5 plugin for inserting files from QuqManager.

The plugin does not bundle @quq/core. It calls @letsoft/quq-loader, and the loader injects the CDN-hosted QuqManager core script when the editor button is used.

Usage

import {
  Image,
  ImageCaption,
  ImageResize,
  ImageStyle,
  ImageTextAlternative,
  ImageToolbar
} from 'ckeditor5'
import { QuqManagerPlugin } from '@letsoft/quq-ckeditor5'

ClassicEditor.create({
  attachTo: document.querySelector('#editor'),
  licenseKey: 'GPL',
  plugins: [
    Image,
    ImageCaption,
    ImageResize,
    ImageStyle,
    ImageTextAlternative,
    ImageToolbar,
    QuqManagerPlugin,
    // other CKEditor plugins...
  ],
  toolbar: [
    'quqInsertFile',
    // other toolbar items...
  ],
  image: {
    toolbar: [
      'imageTextAlternative',
      'toggleImageCaption',
      '|',
      'imageStyle:inline',
      'imageStyle:alignLeft',
      'imageStyle:alignCenter',
      'imageStyle:alignRight',
      '|',
      'resizeImage'
    ],
    styles: ['inline', 'alignLeft', 'alignCenter', 'alignRight']
  },
  quqManager: {
    apiUrl: 'https://api.example.com/api',
    apiKey: 'qk_e0d8b6108844297a2dd7514b0b1a6646110192e8',
    multiple: true,
    accept: ['image/*', 'application/pdf', 'audio/*', 'video/*'],
    videoToolbar: ['quqVideoResize15', 'quqVideoResize50', 'quqVideoResize100']
  }
})

Custom Markup

By default:

• images are inserted through CKEditor image model when the editor has image plugins enabled, so native alignment, captions, alt text, and resize controls work;
• without CKEditor image plugins, images fall back to <img>;
• video files are inserted as selectable widgets with a <figure class="quq-media quq-media-video"> wrapper, default to width:100%, support drag resize up to 100%, and expose 15%, 50%, and 100% toolbar buttons;
• audio files are inserted as selectable widgets with a <figure class="quq-media quq-media-audio"> wrapper;
• other files are inserted as links.

Override the inserted markup with renderFile:

quqManager: {
  apiUrl: 'https://api.example.com/api',
  renderFile(file) {
    return `<figure class="asset"><a href="${file.url}">${file.name}</a></figure>`
  }
}