summernote 粘贴板图片上传到服务器

编程教程 > WEB (1865) 2024-11-26 14:39:04

summernote 粘贴图片上传到服务器
以下为关键代码

//初始化富文本
            $('#description').summernote('destroy');
            $('#description').summernote({
                width:'100%',
                height:250,
                lang: 'zh-CN',
                focus: true,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['insert', ['picture']]
                ],
                callbacks: {
                    onImageUpload:function(files){
                        sendFile(files,'#description');
                    },
                    onPaste: function(event) {
                        console.log(event);
                        if ( event.clipboardData || event.originalEvent ) {

                            var bufferText = ((event.originalEvent || event).clipboardData || window.clipboardData).getData('Text/plain');
                            if(bufferText.length>0)
                            {
                                ;
                            }else
                                event.preventDefault();
                        }
                    }
                }
            });


 文件上传细节:

function sendFile(files, editor) {
            var formData = new FormData();
            formData.append('file',files[0]);
            $.ajax({
                url :  '/file/upload',//后台文件上传接口
            type : 'POST',
                data : formData,
                processData : false,
                contentType : false,
                success : function(res) {
                if(res.result==1)
                {
                    var path='/file/download'+"?fileId="+res.detail;//后台展示图片地址
                    $(editor).summernote('insertImage', path, function ($image) {
                        $image.css('width', 'auto');
                    });
                }else
                    layer.msg(res.message, {shift: 5});
            },error:function(){
                alert("上传失败");
            }
        });
        }

 


评论
User Image
提示:请评论与当前内容相关的回复,广告、推广或无关内容将被删除。

相关文章
summernote 粘贴图片上传到服务器以下为关键代码//初始化富文本 $('#description').summernote('destroy'); ...
本文主要讲解一种方式解决ckeditor编辑器上传的图片时候会添加一个默认的图片的宽高等style属性
tui.editor编辑器部分引入必要文件<link rel="stylesheet" href="your/path/to/tui@editor/toastu
在CKEditor4版本中,对于编辑器高度设置是通过config配置里面的属性height来实现的,如下方所示CKEditor5 版本查文档发现已经没有这个配置了,通过网络资料查询得知,CKEd...
引入插件必要文件基于上一篇《TUI.Editor Markdown 编辑器基于 JavaScript 使用-XQLEE'Blog》改编<link rel="st
ckeditor绑定keyup/keydown等事件实现一些功能,比如实时保存$(function(){//1编辑器初始化$('textarea#blog_content').ckeditor();
首先确定你用的是下面这个编辑器,Quill官网Quill 实现效果参考:实现效果 然后开始了配置toolbarOptions默认的全量配置const toolb
ckeditor 5 自定义插件实现,自定义一个插件并在toolbar上。点击自定义插件图标响应对应事件。环境ckeditor 5.42.1(github稳定版
在ckeditor4的时候绑定blur事件代码如下:window.editor.on('blur',function(){//这里写你想做的事儿})同样的代码搬到ckeditor5不仅不能用,还...
1.引入依赖js文件<script type="text/javascript" src="/plugin/ckeditor5/ckeditor.js"&gtl;</s
本教程适合java任何框架[springMVC,Struts1-2]以及servlet,其他语言同样可以参照传递参数方式前言:ckeditorPHP版本是有个c
[JAVA]_图文详解CKeditor4.4.X版本添加程序代码高亮插件codesnippet1.去CKeditor官网下载4.4.X及以上版本官网直通车:点击
CKeditor 5.0 如何获取纯文本数据,ckeditor官方其实提供了获取带html脚本的内容方法,只需要配合jQuery简单就获取到了文本内容,详细操作如下
问题说明我有一个自己的图像上传逻辑。 但是当我上传图像时,我想为图像添加一个自定义属性和一个自定义class。所以我的图片上传后应该是这样的:<img clas
针对CKEditor5是否开源免费,我们阅读官方响应文档得到下面的结果:所有下载均受相关开源许可协议或商业许可协议(以适用者为准)的约束。 再查阅更详细的文档,