两个版本，每二个较全，但用法有点老，可以互相参考。
第一种：
1、头部文件 做为参考，因为本地要有bower_components这个文件夹才行
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>我要提问</title> <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="../bower_components/summernote/dist/summernote-bs4.min.css"> <link rel="stylesheet" href="../bower_components/select2/dist/css/select2.min.css"> <link rel="stylesheet" href="../bower_components/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css"> <link rel="stylesheet" href="../bower_components/vue-select/dist/vue-select.css"> <script src="../bower_components/jquery/dist/jquery.min.js"></script> <script src="../bower_components/popper.js/dist/umd/popper.min.js"></script> <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="../bower_components/polyfill/dist/polyfill.min.js"></script> <script src="../bower_components/summernote/dist/summernote-bs4.js"></script> <script src="../bower_components/summernote/dist/lang/summernote-zh-CN.min.js"></script> <script src="../bower_components/vue/dist/vue.js"></script> <script src="../bower_components/select2/dist/js/select2.min.js"></script> <script src="../bower_components/select2/dist/js/i18n/zh-CN.js"></script> <script src="../bower_components/vue-select/dist/vue-select.js"></script> </head>
<div class="form-group"> <!--富文本编辑器 start--> <label for="summernote">问题正文</label> <textarea name="content" id="summernote"></textarea> //这个id就在html中引入了summernot <!--富文本编辑器 end--> </div>
2、以下写在最后一个html文件标签的上面，其中ajax上传图片
<script src="../plugins/summernote/summernote.min.js"></script> <script src="../plugins/summernote/summernote-zh-CN.min.js"></script> <script>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
tabsize: 2,
lang: 'zh-CN',
placeholder: '请输入问题的详细描述...',
callbacks:{
//这个方法会在用户使用富文本编辑器选择图片时运行
//参数files就是用户选中的图片,默认是数值类型对象
onImageUpload:function(files){
//获取用户选中的第一张图片(稻草项目只考虑一张)
let file=files[0];
let form=new FormData();
form.append("imageFile",file);
$.ajax({
url:"/upload/image",
method:"post",
data:form,
contentType:false,
processData:false,
//不缓存上传的文件
cache:false,
success:function(r){
console.log(r);
if(r.code==OK){
//要将上传的文件显示在富文本编辑器中
//先定义一个img标签,src属性指向上传成功的文件
let img=new Image();
img.src=r.message;
//summernote提供的方法将img标签显示在富文本编辑器中
$("#summernote").summernote("insertNode",img);
}else{
alert(r.message);
}
}
})
}
}
});
});
</script>
3、后端接收及反回上传情况
先是在application.properties中有以下两名:
straw.resource.path=file:E:/upload //这个需要一个文件服务器的支持，其实就是个最简单的应用，端口号写server.port=8899就行 straw.resource.host=http://localhost:8899
下面两个注解就从上面文件中获得路径：
//获得保存文件的路径和访问路径
@Value("${straw.resource.path}")
private File resourcePath;
@Value("${straw.resource.host}")
private String resourceHost;
@PostMapping("/upload/image")
public R uploadImage(MultipartFile imageFile) throws IOException {
// 按照日期创建文件夹
// path:2021/4/19
String path= DateTimeFormatter.ofPattern("yyyy/MM/dd")
.format(LocalDate.now());
// folder:E:/upload/2021/4/19
File folder= new File(resourcePath,path);
folder.mkdirs();
log.debug("上传的目标文件夹:{}",folder.getAbsolutePath());
//确定上传文件的文件名
//a.b.c.jpg
//0123456
//获得文件的原始文件名
String fileName=imageFile.getOriginalFilename();
//获得后缀名 .jpg
String ext=fileName
.substring(fileName.lastIndexOf("."));
//随机创建文件名
//jakhsdfkjhaksjhdfkj.jpg
String name= UUID.randomUUID().toString()+ext;
log.debug("上传文件名为:{}",name);
//创建要上传的文件对象,并执行上传
File file=new File(folder,name);
imageFile.transferTo(file);
log.debug("文件完整路径:{}",file.getAbsolutePath());
//返回静态资源服务器可以访问这个图片的路径
//拼接访问的路径
String url=resourceHost+"/"+path+"/"+name;
log.debug("Url:{}",url);
//记住r对象中的message就是我们要访问的路径
return R.ok(url);
}
第二种
summernote富文本编辑器的使用
最近在开发一个微信公众号的后台，微信公众号编辑的文章一直没有得到很好地适应，大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中，考虑到复制后会排版出现问题，所以给大家推荐一款很不错的Web富文本编辑器 （summernote）
官网地址为： https://summernote.org/
首先看一下编辑器的样子:
接下来就简单的实现这个编辑器。
1.首先需要从官网下载summernote的包（js和css两部分）然后新建一个页面，因为这个是建立在jquery和bootstarp两个基础上的，所以我们也需要引用他们，以下为我们引入的五个文件，代码如下：
<script src="../../js/jquery-3.1.1.min.js"></script>
<link href="../../css/bootstrap.css" rel="stylesheet" />
<script src="../../js/bootstrap.min.js"></script>
<link href="dist/summernote.css" rel="stylesheet" />
<script src="dist/summernote.js"></script>2.创建一个summernote的容器。
<div id="summernote">Hello Summernote</div>3.创建summernote，并且将上传的图片保存到本地，然后再返回到编辑器中，如果直接复制图片不去保存，图片的地址会是原来的地址，并不是本地的地址。所以我们需要将图片保存到本地，然后就可以将文章获取存入数据库了。
<script>
$(document).ready(function () {
$('#summernote').summernote({
height: 500,
width:1000,
minHeight: 300,
maxwidth: 1000,
minwidth: 200,
maxHeight: 500,
focus: false,
callbacks: {
onImageUpload: function (files, editor) {
var $files = $(files);
// 通过each方法遍历每一个file
$files.each(function () {
var file = this;
// FormData，新的form表单封装，具体可百度，但其实用法很简单，如下
var data = new FormData();
// 将文件加入到file中，后端可获得到参数名为“file”
data.append("file", file);
// ajax上传
$.ajax({
data: data,
type: "POST",
url: "../../ashx_html/summernote.ashx",// div上的action
cache: false,
contentType: false,
processData: false,
// 成功时调用方法，后端返回json数据
success: function (response) {
console.log(response)
var json = $.parseJSON(response)
if (json.state == "error") {
alert("上传失败")
} else {
// 插入到summernote
$('#summernote').summernote('insertImage', json.img_url);
}
},
});
})
}
}
});
});
</script>4.现在我们就可以在页面上看到编辑器了，现在需要建立一个后台接收器，来接受上传的图片保存，然后将图片地址返回到页面。这里我使用ashx来接受，也可以用其他的方式，逻辑都是一样的。
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpFileCollection file_ = context.Request.Files;
sumnmer_data summer_list = new sumnmer_data();
if (file_.Count!=0)
{
long size = file_[0].ContentLength;//文件大小
string type = file_[0].ContentType;//文件类型
string name = file_[0].FileName;//文件名
string _tp = System.IO.Path.GetExtension(name);//文件后缀名
string saveName = DateTime.Now.ToString("yyyyMMddHHmmssfff");//保存后的文件名称（这里使用时间戳）
string file = "\\admin\\summer_img\\"; //保存的路径
string path = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + file;
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
DirectoryInfo dirInfo = new DirectoryInfo(path);
dirInfo.Attributes = FileAttributes.Normal & FileAttributes.Directory;
}
file_[0].SaveAs(path + saveName + _tp);
summer_list.state = "succes";
summer_list.img_url = file + saveName + _tp;
}
else
{
summer_list.state = "error";
}
context.Response.Write(JsonConvert.SerializeObject(summer_list));
}
//返回的类
public class sumnmer_data {
public string state { get; set; } //（成功为succes，失败为error）
public string img_url { get; set; }//图片存到本地的路径
}将文件获取 按路径保存，将保存图片的地址和状态 存入summer_data中 ，然后转为json字符串返回到页面
5.获取编辑器的内容：
var markupStr = $('#summernote').summernote('code');
console.log(markupStr) // 打印到控制器以上就是summernote富文本编辑器的操作和用法，视频上传和这个类似，还有一些编辑器控件的添加和删除，还有一些编辑器的样式修改 官网上都有很详细的说明，不明白的可以留言，我努力解答。
788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
