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

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
随机推荐
WordPress 侧边栏小工具
WordPress 调用自定义头像
MySQL的外键总结
WordPress WP_Query() 文章置顶的方法
JavaScript 和 CSS 检测横屏适配
p 标签里面不能嵌套块级元素
WordPress 文章排序
Node.js MySQL2 如何编写事务