Quill.js富文本编辑器,初始化和自定义图片上传
window.onload = function () {
  //初始化编辑器
  var toolbarOptions = [
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ 'color': [] }, { 'background': [] }],
    [{ 'align': [] }],
    ['image'],
    ['clean']
  ];

  if (!document.querySelector('#editor')) {
    return false;
  }

  var editor = new Quill('#editor', {
    theme: 'snow',
    modules: {
      'toolbar': toolbarOptions
    }
  });


  //同步编辑器内容到textarea
  var html = editor.container.firstChild.innerHTML;
  var content = document.querySelector("textarea[name='content']");
  content.innerHTML = html;

  editor.on('text-change', function (delta, oldDelta, source) {
    content.innerHTML = editor.container.firstChild.innerHTML;
  });

  let toolbar = editor.getModule('toolbar');
  toolbar.addHandler('image', function () {
    var fileInput = this.container.querySelector('input.ql-image[type=file]');
    if (fileInput == null) {
      fileInput = document.createElement('input');
      fileInput.setAttribute('type', 'file');
      fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
      fileInput.classList.add('ql-image');
      fileInput.addEventListener('change', function () {
        if (fileInput.files != null && fileInput.files[0] != null) {
          var formData = new FormData();
          formData.append('file', fileInput.files[0]);
          axios({
            url: '/asset/image/uploadthumbnail',
            method: 'POST',
            data: formData,
            headers: { 'content-type': 'multipart/form-data' },
          }).then(function (res) {
            //你的图片上传成功后的返回值...所以格式由你来定!
            console.log(res);
            var range = editor.getSelection(true);
            editor.insertEmbed(range.index, 'image', res.data.data.url);
            editor.setSelection(range.index + 1);
          }).then(function (res) {
          });
        }
      });
      this.container.appendChild(fileInput);
    }
    fileInput.click();
  });
}

 

官网: https://quilljs.com

修改时间 2018-10-14

真诚赞赏,手留余香
赞赏
随机推荐
Android 学习笔记(一)
Wordpress REST API 开发
macOS 终端清理“新建远程连接”的历史记录
PHP 常用函数
如何更改github工程的语言属性
JS 判断字符串是否为手机号
MySQL 删除多余重复的记录,只保留一条
PM2 生态系统文件 ecosystem.config.js
封装一个像 axios.js 一样的 http 请求拦截器
三点运算符
QQ号

微信联系我

夜间模式切换
回到顶部