tinymce富文本框照片上传

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala

中文官网路径 TinyMCE中文文档中文手册

英文官网路径 The Most Advanced WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCE

我 TinyMCE版本用的是最新版本  TinyMCE5 和 TinyMCE6的最大区别是 自定义图片上传发生了改版。

 1. TinyMCE5版本自定义上传

tinymce.init({
    selector: '#tinydemo',
    plugins: 'image',
    toolbar: 'image',
    images_upload_handler: function (blobInfo, succFun, failFun) {
        var xhr, formData;
        var file = blobInfo.blob();//转化为易于理解的file对象
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/demo/upimg.php');
        xhr.onload = function() {
            var json;
            if (xhr.status != 200) {
                failFun('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.location != 'string') {
                failFun('Invalid JSON: ' + xhr.responseText);
                return;
            }
            succFun(json.location);
        };
        formData = new FormData();
        formData.append('file', file, file.name );//此处与源文档不一样
        xhr.send(formData);
    }
});

2.TinyMCE6版本自定义上传

const example_image_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.open('POST', 'postAcceptor.php');

  xhr.upload.onprogress = (e) => {
    progress(e.loaded / e.total * 100);
  };

  xhr.onload = () => {
    if (xhr.status === 403) {
      reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
      return;
    }

    if (xhr.status < 200 || xhr.status >= 300) {
      reject('HTTP Error: ' + xhr.status);
      return;
    }

    const json = JSON.parse(xhr.responseText);

    if (!json || typeof json.location != 'string') {
      reject('Invalid JSON: ' + xhr.responseText);
      return;
    }

    resolve(json.location);
  };

  xhr.onerror = () => {
    reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
  };

  const formData = new FormData();
  formData.append('file', blobInfo.blob(), blobInfo.filename());

  xhr.send(formData);
});

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  images_upload_handler: example_image_upload_handler
});

我项目是springBoot+layui

java后端

   @PostMapping("tinymce/upload")
    @ResponseBody
    public Map<String, String> tinymceUpload(MultipartFile file){
        if (file.isEmpty()) {
            System.out.println(11111);
        }
        String fileName = null;

            fileName = System.nanoTime() + file.getOriginalFilename();

        File dest = new File(wxAppConfig.getGoodsImageUploadPath(), fileName);
        try {
            file.transferTo(dest);
        } catch (Exception e) {
            System.out.println("上传失败");
        }
        Map<String, String> map = new HashMap<>();
        map.put("location",fileName);
        return map;
    }

Layui:

<div class="layui-form-item lay-form-text">
            <label class="layui-form-label">描述：</label>
                <textarea placeholder="商品详细展示设置"  name="comment" id="mytextarea"></textarea>
        </div>

<script>
    let $ = layui.$;

    $(function (){
        tinymce.init({
            selector: '#mytextarea',
            language:'zh_CN',
            images_upload_url: '../tinymce/upload',
            images_upload_base_path: '/image',
            file_picker_types: 'image',
            plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image    code codesample table  hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount  textpattern help emoticons autosave   autoresize  axupimgs',
            toolbar: ' undo redo restoredraft | forecolor backcolor bold italic underline strikethrough  anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                       styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                       image  emoticons hr pagebreak insertdatetime print preview | fullscreen',

        })
    })

</script>