美文网首页
vue-quill-editor视频上传,图片上传到服务器模块,

vue-quill-editor视频上传,图片上传到服务器模块,

作者: 穿越时光de爱 | 来源:发表于2020-05-10 18:15 被阅读0次

    # quill-video-image-module

    #### 介绍

    quill视频上传,图片上传到服务器模块,用video标签替换iframe

    #### 安装教程

    1. cnpm i vue-quill-editor

    2. cnpm i quill

    3. cnpm i quill-video-image-module

    #### 使用说明

    ```javascript

    <template>

      <div class="createArticle">

        <quill-editor class="ql-editor" v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>

      </div>

    </template>

    <script>

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

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

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

      import {

        quillEditor,

        Quill

      } from 'vue-quill-editor';

      import {

        container

      } from 'quill-video-image-module';

      import {

        ImageExtend,

        QuillWatch

      } from 'quill-video-image-module/quill-image-module';

      import {

        VideoExtend,

        QuillVideoWatch

      } from 'quill-video-image-module/quill-video-module'

      // 引入video模块并注册

      import video from 'quill-video-image-module/video'

      Quill.register(video, true)

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

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

      export default {

        components: {

          quillEditor

        },

        data() {

          return {

            content: '',

            // 富文本框参数设置

            editorOption: {

              modules: {

                ImageExtend: {

                  loading: true, // 可选参数 是否显示上传进度和提示语

                  name: 'img', // 图片参数名

                  size: 2, // 可选参数 图片大小,单位为M,1M = 1024kb

                  action: 'http://127.0.0.1:5000/upload/img', // 服务器地址, 如果action为空,则采用base64插入图片

                  // response 为一个函数用来获取服务器返回的具体图片地址

                  // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}

                  // 则 return res.data.url

                  response: res => {

                    return res.data.url;

                  },

                  headers: () => {}, // 可选参数 设置请求头部

                  start: () => {}, // 可选参数 自定义开始上传触发事件

                  end: () => {}, // 可选参数 自定义上传结束触发的事件,无论成功或者失败

                  error: () => {}, // 可选参数 自定义网络错误触发的事件

                  change: () => {}, // 可选参数 每次选择图片触发,也可用来设置头部,但比headers多了一个参数,可设置formData

                  sizeError: () => {

                    alert('图片不能大于1M')

                  }

                },

                VideoExtend: {

                  loading: true,

                  name: 'img',

                  size: 100, // 可选参数 视频大小,单位为M,1M = 1024kb

                  action: 'http://127.0.0.1:5000/upload/img', // 视频上传接口

                  headers: (xhr) => {

                    // set custom token(optional)

                  },

                  response: (res) => {

                    // video uploaded path

                    // custom your own

                    return res.data.url;

                  },

                  sizeError: () => {

                    alert('视频不能大于100M')

                  }

                },

                toolbar: {

                  container: container, // container为工具栏,此次引入了全部工具栏,也可自行配置

                  handlers: {

                    image: function() {

                      // 劫持原来的图片点击按钮事件

                      QuillWatch.emit(this.quill.id);

                    },

                    video: function() {

                      QuillVideoWatch.emit(this.quill.id)

                    }

                  }

                }

              }

            }

          };

        },

        methods: {},

        created() {

        }

      };

    </script>

    ```

    ```css

    <style>

      .createArticle {

        padding: 40px 40px;

      }

      .ql-editor {

        min-height: 800px;

      }

      /* 解决粘贴后光标会自动弹到文档的初始位置 */

      .ql-clipboard {

        position: fixed;

        display: none;

        left: 50%;

        top: 50%;

      }

      /* 富文本汉化 */

      .ql-snow .ql-tooltip[data-mode='link']::before {

        content: '请输入链接地址:';

      }

      .ql-snow .ql-tooltip.ql-editing a.ql-action::after {

        border-right: 0px;

        content: '保存';

        padding-right: 0px;

      }

      .ql-snow .ql-tooltip[data-mode='video']::before {

        content: '请输入视频地址:';

      }

      .ql-snow .ql-picker.ql-size .ql-picker-label::before,

      .ql-snow .ql-picker.ql-size .ql-picker-item::before {

        content: '14px';

      }

      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,

      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {

        content: '10px';

      }

      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,

      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {

        content: '18px';

      }

      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,

      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {

        content: '32px';

      }

      .ql-snow .ql-picker.ql-header .ql-picker-label::before,

      .ql-snow .ql-picker.ql-header .ql-picker-item::before {

        content: '文本';

      }

      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,

      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {

        content: '标题1';

      }

      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,

      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {

        content: '标题2';

      }

      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,

      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {

        content: '标题3';

      }

      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,

      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {

        content: '标题4';

      }

      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,

      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {

        content: '标题5';

      }

      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,

      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {

        content: '标题6';

      }

      .ql-snow .ql-picker.ql-font .ql-picker-label::before,

      .ql-snow .ql-picker.ql-font .ql-picker-item::before {

        content: '标准字体';

      }

      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,

      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {

        content: '衬线字体';

      }

      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,

      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {

        content: '等宽字体';

      }

    </style>

    ```

    相关文章

      网友评论

          本文标题:vue-quill-editor视频上传,图片上传到服务器模块,

          本文链接:https://www.haomeiwen.com/subject/dtzjnhtx.html