需求:存储文字,图片等,将图片存储到本地,防止服务器内容过多,并更好地转移图片,清理图片。
1、下载ueditor-1.4.3.3.zip 和 ueditor1_4_3_3-utf8-jsp.zip 我使用的是jsp
2、解压后,导入 ueditor1_4_3_3-utf8-jsp --> utf8-jsp
3、在页面中引入 utf8-jsp内的 ueditor.config.js、ueditor.all.js、zh-cn.js 三个js文件及ueditor.css,引入jquery
4、jsp页面中添加 <script id="container" name="content" type="text/plain"> </script>
5、jsp页面中添加js: <script type="text/javascript">
$("#width").blur(areaTest);
$("#height").blur(areaTest);
function areaTest(){
var width = $("#width").val();
var height = $("#height").val();
if(width == ""||width == null||width == undefined){
return;
}
if(height == ""||height == null||height == undefined){
return;
}
var area = width*height;
if(isNaN(area)){
$("#area").val("0");
return;
}
$("#area").val(area);
}
var ue = UE.getEditor('container',{
toolbars: [
[
'undo', //撤销
'bold', //加粗
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'formatmatch', //格式刷
'selectall', //全选
'print', //打印
'link', //超链接
'unlink', //取消链接
'fontfamily', //字体
'fontsize', //字号
'simpleupload', //单图上传
'insertimage', //多图上传
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'touppercase', //字母大写
'tolowercase', //字母小写
]
],
});
6、ctrl + H 搜索 config.json 文件,将"imageUrlPrefix":""; 修改为项目名,写法如 "imageUrlPrefix":"/sarida";或
"imageUrlPrefix": "http://localhost:8080/sarida" 其余不用修改
以上可完成图片存入到项目中,数据库存入的是标签形式的内容,可用mysql的test类型接收
如果想要存储到本地,那么前5步不变
6、导入ueditor-1.4.3.3 --> jsp --> src --> com 到 src/main/java 下 ,如果报错,修改包名
7、添加存储的地址,最好写到一个peoperties文件或xml文件中
8、修改3处地址:第一处:即刚引入的ueditor-1.4.3.3的文件中的com.baidu.ueditor.hunter的ImageHunter.java 第92行左右的
String physicalPath = this.rootPath + savePath; 更改为String physicalPath = 读取第7步的地址 + savePath;
第二处:com.baidu.ueditor.upload的Base64Uploader 第32行左右,修改如同第一处。
String physicalPath = this.rootPath + savePath; 更改为String physicalPath = 读取第7步的地址 + savePath;
第三处:com.baidu.ueditor.upload的BinaryUploader第73行左右,
修改如同第一处。
String physicalPath = this.rootPath + savePath; 更改为String physicalPath = 读取第7步的地址 + savePath;
此时可以配置到本地中,项目中没有,导致页面显示不出图片。
9、ctrl + H 搜索 config.json 文件,将"imageUrlPrefix":"";改为 "imageUrlPrefix": "/sarida/img/show?url=",即为“/项目名/controller层请求路径”
10、在/sarida/img/show的后台中依据url和第7步的路径组合成绝对路径,对文件进行流的读取显示。绝对路径依据后台打印出来进行组合,打印出来十分方便,不易错。使用流对图片的读显参考这个https://blog.csdn.net/sarida/article/details/81009563
几乎一模一样。