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

真诚赞赏,手留余香
赞赏
随机推荐
PHP开发api接口安全验证
如何解决mysql delete表数据后,表空间大小不变的问题
为什么Axios ajax每次patch都会有两次网络请求?
19号笔刷的运用小技巧
手绘板如何画好线条
AES ECB CBC
子元素margin-top对父元素的影响
Vue 2.0 发布了!
Mac OS原来自带了apache,基本用法总结
敏捷开发笔记