https://github.com/zhijunzhou/quill-video-extend-module

Support for uploading local videos plugin
https://github.com/zhijunzhou/quill-video-extend-module

quill-editor quilljs upload-videos video vue2

Last synced: about 1 month ago
JSON representation

Support for uploading local videos plugin

• Host: GitHub
• URL: https://github.com/zhijunzhou/quill-video-extend-module
• Owner: zhijunzhou
• Created: 2018-08-02T07:50:12.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-03T03:25:22.000Z (over 6 years ago)
• Last Synced: 2024-11-11T17:27:50.589Z (2 months ago)
• Topics: quill-editor, quilljs, upload-videos, video, vue2
• Language: JavaScript
• Homepage:
• Size: 5.86 KB
• Stars: 9
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# quill-video-extend-module

## Install

```bash

npm install quill-video-extend-module --save

```

## Usage

Vue template

```html

```

Basic Configuration

```js

import { VideoExtend, QuillVideoWatch } from './quill-video-extend-module'

import { quillEditor, Quill } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

Quill.register('modules/VideoExtend', VideoExtend)

export default {

  props: {

    content: {

      required: true

    },

    placeholder: {

      default: '...'

    },

    videoUploadUrl: {

      default: ''

    },

    token: {

      required: false

    },

    toolbar: {

      required: false

    }

  },

  data() {

    const container = [

      [{ header: [1, 2, 3, 4, 5, 6, false] }],

      ['bold', 'italic', 'underline', 'strike'], // toggled buttons

      [{ list: 'ordered' }, { list: 'bullet' }],

      [{ script: 'sub' }, { script: 'super' }], // superscript/subscript

      [{ indent: '-1' }, { indent: '+1' }], // outdent/indent

      [{ color: [] }, { background: [] }], // dropdown with defaults from theme

      ['image', 'video', 'clean']

    ]

    return {

      editorContent: this.content,

      editorOption: {

        placeholder: this.placeholder,

        modules: {

          toolbar: {

            container: container,

            handlers: {

              'video': function() {

                QuillVideoWatch.emit(this.quill.id)

              }

            }

          },

          history: {

            delay: 1000,

            maxStack: 50,

            userOnly: false

          },

          VideoExtend: {

            loading: true,

            name: 'video',

            action: this.videoUploadUrl,

            headers: (xhr) => {

              // set custom token(optional)

              xhr.setRequestHeader('token', this.token)

            },

            response: (res) => {

              // video uploaded path

              // custom your own

              return process.env.BASE_API + res.data.path

            }

          }

        }

      }

    }

  }

}

```