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

编程教程 > WEB (1872) 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'); ...
summernote 获取纯文本方法首先我们可以通过summernote api提供的方法获取到包含html标签的内容
本文主要讲解一种方式解决ckeditor编辑器上传的图片时候会添加一个默认的图片的宽高等style属性
在CKEditor4版本中,对于编辑器高度设置是通过config配置里面的属性height来实现的,如下方所示CKEditor5 版本查文档发现已经没有这个配置了,通过网络资料查询得知,CKEd...
tui.editor编辑器部分引入必要文件<link rel="stylesheet" href="your/path/to/tui@editor/toastu
一.前言俗话说,工欲善其事必先利其器,本教程主要讲解如何在sublime编辑器中安装python软件包,以实现自动完成等功能,并在sublime编辑器本身中运行build
ckeditor 5 自定义插件实现,自定义一个插件并在toolbar上。点击自定义插件图标响应对应事件。环境ckeditor 5.42.1(github稳定版
引入插件必要文件基于上一篇《TUI.Editor Markdown 编辑器基于 JavaScript 使用-XQLEE'Blog》改编<link rel="st
ckeditor绑定keyup/keydown等事件实现一些功能,比如实时保存$(function(){//1编辑器初始化$('textarea#blog_content').ckeditor();
首先确定你用的是下面这个编辑器,Quill官网Quill 实现效果参考:实现效果 然后开始了配置toolbarOptions默认的全量配置const toolb
在html中,使用css控制实现图片下方浮动一行文字说明,效果图如下:代码:<%@ page language="java" contentType="text
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。你会看到,不管是什么布局,Flex往往都可以几行命令搞定。我只列出代码,详细的语法解释请查阅
问题概述position: sticky 滑动一定长度后失效,position: sticky滑动一半失效,position: sticky 滑动失效解决问题解
在css中有有一下几种换行策略:1. word-break:break-all;只对英文起作用,以字母作为换行依据(既,如果一个单词在换行时比较长会自动拆分单词
如何使用css3设置div为圆角样式,以及分别对每个角都可以自定义设置大小