一个简单不报错的summernote 图片上传案例

2024-10-24 22:42:08

一个比较完整的summernote上传图片的案例，没有后台（上传图片网上案例太多），只有前端js.修正了网上提供的，但是有bug的代码。

这个例子，js保证不报错。亲测可用

<%@ page language="java" contentType="text/html; charset=utf-8"
  pageEncoding="utf-8"%>
<!DOCTYPE html >
<html>
<head>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"><!--必须-->
<link href="summernote-master/dist/summernote.css" rel="stylesheet" type="text/css"><!--必须-->
<script src="summernote-master/dist/summernote.js"></script><!--必须-->
<script src="summernote-master/lang/summernote-zh-CN.js"></script>

<title>bootstrap-markdown</title>
<style>
.note-alarm {
float: right;
margin-top: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
 <div id="summernote"></div>
<script type="text/javascript">

$(document).ready(function() {

/* function sendFile(file, editor,welEditable) {
 console.log("file="+file);
 console.log("editor="+editor);
 console.log("welEditable="+welEditable);
  data = new FormData();
  data.append("blog_image[image]", file);
  $.ajax({
   url: 'blog_images.jsp',
   data: data,
   cache: false,
   contentType: false,
   processData: false,
   type: 'POST',
   success: function(data){
    editor.insertImage(welEditable, data.url);
   }
  });
 }
*/
 $('#summernote').summernote({
  height: 300, /*高さを指定*/
  lang: 'zh-CN', // default: 'en-US'
 focus:true,
  toolbar: [
   ['style', ['bold', 'italic', 'underline', 'clear']],
   ['fontsize', ['fontsize']],
   ['color', ['color']],
   ['para', ['ul', 'ol', 'paragraph']],
   ['height', ['height']],
   ['insert', ['picture', 'video']]
  ],
 /* image: {

     selectFromFiles: '选择文件'

    }, */
  /*onImageUpload: function(files, editor, welEditable) {
    sendFile(files[0], editor,welEditable);
  }*/
    onImageUpload: function(files, editor, $editable) {
  sendFile(files[0],editor,$editable);
  }

 });
});

function sendFile(file, editor, $editable){
$(".note-toolbar.btn-toolbar").append('正在上传图片');
var filename = false;
try{
filename = file['name'];
alert(filename);
} catch(e){filename = false;}
if(!filename){$(".note-alarm").remove();}
//以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误
var ext = filename.substr(filename.lastIndexOf("."));
ext = ext.toUpperCase();
var timestamp = new Date().getTime();
var name = timestamp+"_"+$("#summernote").attr('aid')+ext;
//name是文件名，自己随意定义，aid是我自己增加的属性用于区分文件用户
data = new FormData();
data.append("file", file);
data.append("key",name);
data.append("token",$("#summernote").attr('token'));

$.ajax({
data: data,
type: "POST",
url: "/summernote/fileupload", //图片上传出来的url，返回的是图片上传后的路径，http格式
contentType: "json",
cache: false,
processData: false,
success: function(data) {
//data是返回的hash,key之类的值，key是定义的文件名
alert(data);
//把图片放到编辑框中。editor.insertImage 是参数，写死。后面的http是网上的图片资源路径。
//网上很多就是这一步出错。
$('#summernote').summernote('editor.insertImage', "http://res.cloudinary.com/demo/image/upload/butterfly.jpg");

$(".note-alarm").html("上传成功,请等待加载");
setTimeout(function(){$(".note-alarm").remove();},3000);
},
error:function(){
$(".note-alarm").html("上传失败");
setTimeout(function(){$(".note-alarm").remove();},3000);
}
});
}

</script>
</body>
</html>

以上这篇一个简单不报错的summernote 图片上传案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Summernote实现图片上传功能的简单方法

还是接着之前说过的最近在写一个BootStrap网页....然后要用富文本编辑器,随便搜了下就选了这货然后发现了很尴尬的问题...图片上传功能无效....然后各种搜索各种无果...最后怒翻Summernote官方文档总算解决了,总之写下解决过程后端部分就不提供代码了,满大街都是,这里假设后端拿到上传文件后返回文件的地址首先附上参考资料:Summernote官方开发文档简单说下Summernote的图片上传功能实现方案首先根据官方文档提供的API,挂接文件上传事件,然后自己用JS重新上传
一个简单不报错的summernote 图片上传案例

一个比较完整的summernote上传图片的案例,没有后台(上传图片网上案例太多),只有前端js.修正了网上提供的,但是有bug的代码. 这个例子,js保证不报错.亲测可用 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html > <html> <head&
JavaScript多图片上传案例

JS多图片上传小小实例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>上传多图片</title> <script type="text/javascript"> function JM_wu(ob) { ob.style.display = "none"; } function JM_you(ob) { ob.sty
spring boot实现图片上传和下载功能

这篇博客简单介绍下spring boot下图片上传和下载,已经遇到的问题.首先需要创建一个spring boot项目. 1.核心的controller代码 package com.qwrt.station.websocket.controller; import com.alibaba.fastjson.JSONObject; import com.qwrt.station.common.util.JsonUtil; import org.slf4j.Logger; import org.slf
C#实现图片上传与浏览切换的方法

本文以一个完整实例讲述了C#实现图片上传与浏览切换的方法,对于进行C#程序设计来说具有一定的借鉴价值.分享给大家供大家参考. 具体实现代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//
python 实现图片上传接口开发并生成可以访问的图片url

版本:python3.7 功能,开发一个用户访问的页面,支持图片上传,并将其保存在服务器. 项目结构: app.py文件内容如下: from flask import Flask, Response, request, render_template from werkzeug.utils import secure_filename import os app = Flask(__name__) # 设置图片保存文件夹 UPLOAD_FOLDER = 'photo' app.config['U
node+multer实现图片上传的示例代码

最近在学习node实现一个后台管理系统,用到了图片上传,有一些小问题记录一下~ 直接上代码,问题都记录在注释里~ const express = require('express'); const path = require('path'); const multer = require('multer'); const app = new express(); // 设置静态目录第一个参数为虚拟的文件前缀,实际上文件系统中不存在 // 可以用public做为前缀来加载static文件夹下的
java实现简单图片上传下载功能

本文实例为大家分享了java实现简单图片上传下载的具体代码,供大家参考,具体内容如下 1.首先在上传图片界面:将form表单的enctype改为:multipart/form-data 2.定义一个实体类用来将存放图片存放的路径存入到mysql中private String imgpath; 3.在spring容器中注入处理图片的解析器 <bean name="multipartResolver" class="org.springframework.web.multi
基于vue-upload-component封装一个图片上传组件的示例

需求分析业务要求,需要一个图片上传控件,需满足多图上传点击预览图片前端压缩支持初始化数据相关功能及资源分析基本功能先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件,没有完全满足需求的组件,过滤后找到 vue-upload-component 组件,功能基本都有,自定义也比较灵活,就以以此进行二次开发. 预览因为项目是基于 vant 做的,本身就提供了 ImagePreview 的预览组件,使用起来也简单,如果业务需求需要
ASP.NET MVC图片上传前预览简单实现

本文实例为大家分享了图片上传前预览并获取图片文件名和图片字节大小的具体实现代码,供大家参考,具体内容如下在控制器中创建一个Action: 在Views目录下对应的控制器名称下创建视图PreViewing: 上图中标记1,引用jQuery类库. 标记2,选择文件. 标记3,预览图片. 标记4,显示图片文件名和图片字节大小. 标记5,是Javascript代码...... 本例预览: 以上就是本文的全部内容,希望对大家的学习有所帮助.
Java实现一个简单的文件上传案例示例代码

Java实现一个简单的文件上传案例实现流程: 1.客户端从硬盘读取文件数据到程序中 2.客户端输出流,写出文件到服务端 3.服务端输出流,读取文件数据到服务端中 4.输出流,写出文件数据到服务器硬盘中下面上代码上传单个文件服务器端 package FileUpload; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.net.Serve

一个简单不报错的summernote 图片上传案例

相关推荐

随机推荐