ueditor 富文本编辑器的 初体验 java

10 篇文章 0 订阅

1.http://ueditor.baidu.com/website/index.html  下载包

2.解压然后放入自己项目目录

 

 

 3.

<script type="text/javascript">
   window.UEDITOR_HOME_URL="${jspPath}/js/editor/";  //指向根目录 初始化对象

</script>

 

 4.

<script type="text/javascript" src="${jspPath}/js/editor/editor_all.js"></script>
<script type="text/javascript" src="${jspPath}/js/editor/editor_config.js"></script>
<link rel="stylesheet" href="${jspPath}/js/editor/themes/default/css/ueditor.css">

 

 

<textarea id="summarys"   rows="15" cols="120" name="summarys" οnclick="testedior('summarys')">${summary}</textarea>

 

<script type="text/javascript">
 function testedior(id){
  new UE.ui.Editor({
   toolbars:[['fullscreen', 'source', '|', 'undo', 'redo', '|',
                 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch','autotypeset','blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','selectall', 'cleardoc', '|',
                 ,'lineheight','|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|','indent', '|',
                 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|','touppercase','tolowercase','|',
                 'link', 'unlink', 'anchor', '|','imagecenter', '|','insertimage','pagebreak', '|',
                 'horizontal', 'date', 'time', 'spechars', '|','inserttable', 'deletetable', '|', 'preview','help']],
         initialFrameWidth:950,//宽度
         theme:"default", //皮肤
   autoFloatEnabled:false,//工具栏不随着浏览器的滚动漂浮
         autoHeightEnabled:false,//内容不自动增高
         lang:'zh-cn' //语言
     }).render(id);
 }
</script>

 5.

上传图片需要修改配置editor_config.js

里面的路径

 //图片上传配置区
        ,imageUrl:URL+"file!bdupload.action?_charset_=utf-8"             //图片上传提交地址
        ,imagePath:""                     //返回是网络地址直接为空

        ,imageFieldName:"filedata"                   //图片数据的key,若此处修改,需要在后台对应文件修改对应参数
        //,compressSide:0                            //等比压缩的基准,确定maxImageSideLength参数的参照对象。0为按照最长边,1为按照宽度,2为按照高度
        //,maxImageSideLength:900                    //上传图片最大允许的边长,超过会自动等比缩放,不缩放就设置一个比较大的值,更多设置在image.html中

 

 

java

 /**
  * 新编辑器
  * @return
  * @throws Exception
  */
 public String bdupload() throws Exception{
  admin=(Admin)ServletActionContext.getRequest().getSession().getAttribute("admin");
  ServletActionContext.getResponse().setContentType("text/html; charset=utf-8");
    String path1="";
    int nid=admin.getAdid();
    if(filedata!=null){
     path1 = fileService.newuploadPicture(filedata, filedataFileName, new int[] {550, 150},15,nid);
   }
    String json="{\"title\":\"tt\",\"state\":\"SUCCESS\",\"url\":\""+path1+"\"}"; 
   try {
    ServletActionContext.getResponse().getWriter().write(json);
   } catch (IOException e) {
    e.printStackTrace();
   }
    return null;
  }


          

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用以下步骤在Spring Boot中集成UEditor富文本编辑器: 1.下载UEditor插件,将其解压缩到项目的静态资源目录(如:src/main/resources/static/ueditor)中。 2.在Spring Boot的配置文件application.properties或application.yml中添加如下配置: ```properties spring.resources.static-locations=classpath:/static/ ``` 或 ```yaml spring: resources: static-locations: classpath:/static/ ``` 3.编写一个Controller来访问UEditor插件,代码如下: ```java @Controller @RequestMapping("/ueditor") public class UeditorController { @GetMapping("/") public String index() { return "ueditor/index"; } @PostMapping("/upload") @ResponseBody public String upload(HttpServletRequest request) { String result = ""; try { // 获取UEditor上传的文件 MultipartFile file = ((MultipartHttpServletRequest) request).getFile("upfile"); // 获取文件名 String fileName = file.getOriginalFilename(); // 获取文件后缀 String suffix = fileName.substring(fileName.lastIndexOf(".")); // 生成新的文件名 String newFileName = UUID.randomUUID().toString() + suffix; // 获取文件保存路径 String savePath = "src/main/resources/static/ueditor/upload/"; File saveFile = new File(savePath + newFileName); // 保存文件 file.transferTo(saveFile); // 返回文件访问路径 result = "{\"state\":\"SUCCESS\",\"url\":\"/ueditor/upload/" + newFileName + "\",\"title\":\"" + fileName + "\",\"original\":\"" + fileName + "\"}"; } catch (Exception e) { e.printStackTrace(); result = "{\"state\":\"ERROR\"}"; } return result; } } ``` 4.在静态资源目录中创建一个index.html文件,代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>UEditor Demo</title> <!-- 引入UEditor --> <script type="text/javascript" src="/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="/ueditor/ueditor.all.min.js"></script> <script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script> </head> <body> <!-- 编辑器容器 --> <script id="editor" type="text/plain"></script> <!-- 实例化编辑器 --> <script type="text/javascript"> var editor = UE.getEditor('editor'); </script> </body> </html> ``` 5.启动应用,访问http://localhost:8080/ueditor/,即可看到UEditor富文本编辑器。 注意:在上传文件时,需要先创建一个文件夹(如:upload),并将其放在静态资源目录中。同时,需要对文件保存路径进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值