ueditor的使用存储到本地并回显

需求：存储文字，图片等，将图片存储到本地，防止服务器内容过多，并更好地转移图片，清理图片。

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

几乎一模一样。

ueditor的使用存储到本地并回显

猜你喜欢