如何通过URL上传图像来扩展Bootstrap-wysihtml5编辑器？-Java 学习之路

我目前正在我的可编辑区域使用Bootstrap-wysihtml5文本编辑器 . 现在我想将图像上传功能添加到我的编辑器中 . 但是图片的来源应该只是网址 .

当我将新图像链接插入编辑器的图像插入区域时;

它应该将图像下载到我的服务器
应该检查下载的图像的大小，mime类型等
如果一切正常，那么我会把它上传到我的S3桶

我已经编码了第2和第3但我无法处理数字1.当我点击插入时，如何触发wysihtml5编辑器进行URL图像上传？

有人在这里做到了：https://github.com/bassjobsen/wysihtml5-image-upload but 它使用传统上传 . 不是来自任何网址 .

见演示：http://www.w3masters.nl/bootstrap-wysihtml5/

我想实现上传功能，但仅限于URL . 在开始编写脚本之前我该怎么办？初学者javascript编码器需要几天，几周？

例如，stackoverflow的图像功能支持来自Web的链接 . 你有任何想法或消息来源吗？

enter image description here

在上面的图像上，您可以插入新图像，但不能将该图像存储在服务器上 . 从URL插入图像后，图像源应该是我自己的域

在这里，您可以看到来自URL功能的插入图像，而无需上传功能：http://jhollingworth.github.io/bootstrap-wysihtml5/

2 回答

1

此功能已在此处可用：http://jhollingworth.github.io/bootstrap-wysihtml5/（使用工具栏中最右侧的按钮） .

回复于 2024-04-29T13:23:12+08:00

试试这个

$($('.wysihtml5-sandbox').contents().find('body')).on("drop", function(event) {
              event.preventDefault();  
              event.stopPropagation();
               var dt = event.originalEvent.dataTransfer;
                        var files = dt.files;

              var reader = new FileReader();
              reader.onload = function (e) {
                    debugger;
                  var data = this.result;
                  vm.composer.commands.exec('insertImage',e.target.result);
              }
              reader.readAsDataURL( files[0] );
          });

https://jsfiddle.net/surajmahajan007/2yu456nw/

回复于 2024-04-29T13:23:12+08:00

如何通过URL上传图像来扩展Bootstrap-wysihtml5编辑器？

2 回答

相关问题