vue-quill-editor 图片上传和视频连接直接插入frame

点击插入视频连接用的vant组件

vant组件安装

//npm安装
npm install vant --save

//main.js全局引入vant组件
import App from './App.vue'
import Vant from 'vant';
Vue.use(Vant);
//全局js引入vant的toast提示框
Vue.use(Toast);
import { Toast } from 'vant';

上传图片后，一般正常的都需要用户自定义改变图片的大小
使用的quill-image-drop-module

//npm安装
npm install vue-quill-editor；
npm install quill-image-resize-module；

改变vant样式使用的css 的less语法

npm install less less-loader --save

<template>
  <div id="body">
    <div>
      <quilleditor v-model="content"
                   class='editor'
                   ref="myTextEditor"
                   :options="editorOption"
                   @change="onChange">
      </quilleditor>
    </div>
    <div class="popup">
      <van-popup id="video-upload-wapper"
                 position="top"
                 closeable
                 :lazy-render='false'
                 :style="{ height: '30%' }"
                 v-model="videoUploadTag">
        <p class="pop-title">视频上传</p>
        <van-field v-model="videoLink"
                   class="pop-text"
                   placeholder="填写链接地址" />
        <van-button type="info"
                    class="pop-button"
                    @click="addVideoLink()">添加</van-button>
      </van-popup>
    </div>
    <van-button id="detail-page-Submit"
                @click="contentSubmit">发布</van-button>
  </div>
</template>
<script>
import api from "../utils/api";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
//默认的vue-quill-editor只有几个字体大小样式，自定义需要的px样式
import "@/assets/fontstyle/size-set.css";

Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

let fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['12px', '14px', '16px','18px','20px', '22px','24px', '26px', '28px','30px','32px', '36px', false];
Quill.register(fontSizeStyle, true);
export default {
  name: 'v-editor',
  props: {
    value: {
      type: String
    },
    /* 上传图片的file控件name */
    fileName: {
      type: String,
      default: 'file'
    },
    maxUploadSize: {
      type: Number,
      default: 1024 * 1024 * 1024 * 5 // 默认最大5M
    }
  },
  mounted () {
    console.log("-------------");
    api.getPropaganda().then((res) => {
      if (res.message === "SUCCESS")
      {
        console.log(this.$refs.myTextEditor.quill);
        this.$refs.myTextEditor.quill.root.innerHTML = res.data
      }

    })
  },
  data () {
    var self2 = this;
    return {
      content: '',
      // 显示插入视频链接弹框的标识
      videoUploadTag: false,
      inputCodefocus: false,
      // 弹框插入的视频链接记录
      videoLink: '',
      index: null,

      // 编辑器配置选项
      editorOption: {
        theme: 'snow', // or 'bubble'
        placeholder: self2.content,
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              [{ indent: '-1' }, { indent: '+1' }], // 缩进
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              // [{ 'font': fonts }], // 字体种类
               [{ size: fontSizeStyle.whitelist}], 
              // [{ size: ["small", false, "large", "huge"] }], // 字体大小 2
              // [{'size': ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']}], 
              [{ align: [] }], // 对齐方式
              ['clean'], // 清除文本格式
              ['link', 'image', 'video'] // 链接、图片、视频 ['link', 'image', 'video']
            ],
            handlers: {
              'image': function (value) {
                /* 内存创建input file */
                var input = document.createElement('input');
                input.type = 'file';
                input.name = self2.fileName;
                input.accept = 'image/jpeg,image/png,image/jpg,image/gif';
                input.onchange = self2.onFileChange;
                input.click()
              },
              'video': function () {
                console.log("------------------------");
                var range = self2.$refs.myTextEditor.quill.getSelection();
                if (range === null)
                {
                  self2.index = 0;
                } else
                {
                  self2.index = range.index;
                }
                console.log(self2.index);
                self2.videoUploadTag = true
              }
            }
          },
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      }
    }
  },

  methods: {
    addVideoLink () {
        
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      if (this.videoLink.length === 0)
      {
        alert('请输入视频链接');
      } else if (!/^<iframe.+<\/iframe>$/.test(this.videoLink))
      {
        alert('请直接复制分享的连接');
      }
      let reg = /["][//play]([^"]*)["]/;
      let videoLink;

      this.videoLink.replace(reg, function () {
        videoLink = arguments[0].slice(1, arguments[0].length - 1)
      });
      this.videoLink = videoLink
      console.log(this.index);
      // 隐藏弹框
      this.videoUploadTag = false;
      // 将视频链接插入到当前的富文本当中
      // this.$refs.myTextEditor.quill.insertEmbed(this.index, 'video', this.videoLink);
      this.$refs.myTextEditor.quill.insertEmbed(this.index, 'video', this.videoLink,'375px');
      this.videoLink = null
      this.$toast.clear()
    },
    onChange () {
      this.$emit('input', this.content)
    },
    /* 选择上传图片切换 */
    onFileChange (e) {

      var fileInput = e.target;
      if (fileInput.files.length === 0)
      {
        return
      }
      this.editor.focus();
      if (fileInput.files[0].size > this.maxUploadSize)
      {
        this.$alert('图片不能大于500KB', '图片尺寸过大', {
          confirmButtonText: '确定',
          type: 'warning'
        })
      }
      console.log("------------------");
      console.log(fileInput.files[0]);
      var data = new FormData();
      data.append(this.fileName, fileInput.files[0]);
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
       //在这里选择你自己的服务器上传，发送
      api.upLoadFile(data).then((res) => {
        if (res)
        {
          console.log('图片地址：'+ res);
          this.editor.insertEmbed(this.editor.getSelection().index, 'image', res)

        }
      })
      document.getElementsByTagName("img").load(function () {
        this.$toast.clear()
      });
    },
    contentSubmit () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      console.log(this.content);
      let data = {
        propaganda:this.content
      }
      api.postPropaganda(data).then((res) => {
        console.log(res);
        if (res.message === "SUCCESS")
        {
          this.$router.push({ path: "/deatilPage" });
        }
        this.$toast.clear()
      })
    }

  },
  computed: {
    editor () {
      return this.$refs.myTextEditor.quill
    }
  },
  components: {
    'quilleditor': quillEditor
  },
  watch: {
    'value' (newVal, oldVal) {
      if (this.editor)
      {
        if (newVal !== this.content)
        {
          this.content = newVal
        }
      }
    }
  }
}
</script>

<style scoped>
#body {
  width: 375px;
  height: 667px;
}
</style>

<style>
.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";
}
</style>
<style lang="less">
#video-upload-wapper {
  width: 375px;
  .pop-title {
    text-align: center;
    margin-left: 10px;
    font-size: 16px;
  }
  .pop-text {
    margin: 10px;
    border-radius: 4px;
  }
  .pop-button {
    width: 200px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(42, 130, 228, 0.7285714285714286);
    box-shadow: rgba(128, 128, 128, 1) solid 1px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    margin: 10px 0 0 90px;
  }
}
.editor {
  line-height: normal !important;
  height: 500px;
  width: 375px;
}
#detail-page-Submit {
  position: fixed;
  width: 355px;
  height: 39px;
  bottom: 9px;
  left: 10px;
  // margin-bottom: 9px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 112, 80, 1);
  border-radius: 5px;
  font-size: 16px;
  line-height: 150%;
  text-align: center;
}
</style>

size-set.css内容

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
  content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
  content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {
  content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
  content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='22px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='22px']::before {
  content: '22px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
  content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='26px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='26px']::before {
  content: '26px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='28px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='28px']::before {
  content: '28px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='30px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='30px']::before {
  content: '30px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='32px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='32px']::before {
  content: '32px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
  content: '36px';
}
/**设置默认字体显示
**/
.ql-container {
    font-size:16px;
}