ueditor jsp版 在SSH2项目中使用小结

最新推荐文章于 2018-09-25 17:33:23 发布
最新推荐文章于 2018-09-25 17:33:23 发布
阅读量787 收藏
点赞数
分类专栏： -----ueditor 文章标签： ueditor javaweb 富文本编辑器 ueditor jsp controller.jsp config.json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/elementf/article/details/72675902
版权
最近项目涉及富文本框功能，一番调研后，决定使用ueditor。因其文档齐全，且出自百度，放心!
看了官方文档，也看了不少兄弟的博客，踩了一些坑，在此记录下。
主要关注几个文件：
1、jsp/config.json（上传文件、涂鸦、图片、视频等路径配置）
2、controller.jsp（内部action统一转发）
3、ueditor.config.js（默认配置）
4、ueditor.all.js/ueditor.all.min.js
一、简介
ueditor是百度编辑器，官网地址： http://ueditor.baidu.com/website/
完整的功能演示，可以参考： http://ueditor.baidu.com/website/onlinedemo.html
下载开发版本jsp-utf8版本，下载的zip包解压后，重命名utf8-jsp为editor，
然后将其拷贝到项目中，我放的路径为WebRoot/plugin/下
二、如何引入ueditor编辑器
下载包的index.html是编辑器示例，主要几处代码如下： 
<head>
   ……
<!--编辑器基本配置-->
<script type="text/javascript" src="plugin/ueditor/ueditor.config.js"></ script>
<!--编辑器完整代码-->
<script type="text/javascript" src="plugin/ueditor/ueditor.all.js"> </script >
  ……
</head>
<body>
<div>
<script id="editor" type="text/plain"></ script>
</div>
<script type="text/javascript">
//实例化编辑器
var ue = UE.getEditor( 'editor', {
        autoHeightEnabled: true,
        autoFloatEnabled: true,
        initialFrameWidth: 690,
        initialFrameHeight:483
    });
</script>



三、修改文件 ueditor.config.js







 

 

 
 
 
  注意： var URL = window.UEDITOR_HOME_URL || "/abc/plugin/ueditor/"; 
 
 
 
 
  , serverUrl: URL + "jsp/controller.jsp"（abc表示项目部署跟目录） 
 
 
 
 
   
   
   
 
 
 
 
  四、修改文件 jsp/config.json（主要是配置图片、文件、视频上传路径等） 
 
 
 
 
  该配置文件上传路径为/upload/notice/image/... 
 
 
 
 
  注意：各个配置的“*UrlPrefix”（回显时自动添加url的前缀）、“*PathFormat"（文件上传路径） 
 
 
 
 
   
  
 
 
 
 
 
  config.json最后部分，配置文件、图片在线回显路径（只需要配置跟路径，会自动回显根路径下所有路径的文件，此处路径需对照前面文件保存路径处理） 
 
 
 
 
   
  
 
 
 
 
 
  五、修改jsp/controller.jsp 该文件主要是实现所有请求入口，可在此文件对请求Action进行过滤处理 
 
 
 
 
  
<%
    request.setCharacterEncoding( "utf-8" );
	response.setHeader("Content-Type" , "text/html");
	String rootPath = application.getRealPath( "/" );
// 	out.write( new ActionEnter( request, rootPath ).exec() );
	String result = new ActionEnter( request, rootPath ).exec();  
	String action = request.getParameter("action");
	//图片、附件在线管理中回显时，格式化回显路径，否则无法正常格式化
	if( action!=null && (action.equals("listfile") || action.equals("listimage"))){  
	    rootPath = rootPath.replace("\\", "/");  
	    result = result.replaceAll(rootPath, "/");  
	}  
	out.write( result ); 
%>
 
 
 
 
 
  六、优化图片选择（解决选择图片时很慢问题） 
 
 
 
 
  修改ueditor/ueditor.all.js ueditor/ueditor.all.min.js 
 
 
 
 
  ctrl+f 搜索 accept 
 
 
 
 
  搜到的涉及图片的改为如下： 
 
 
 
 
  accept="image/jpg,image/jpeg,image/gif,image/png,image/bmp" 
 
 
 
 
  七、表情包本地化（解决通过网络获取方式表情包显示异常） 
 
 
 
 
  到官网下载本地表情包： 
 
 
  
 
 
  表情文件本地化使用说明： 
 
 
 
 
  （1）images目录下的所有表情文件夹复制到dialogs/emotion/images/文件夹下面 
 
 
 
 
  （2）修改editor_config.js文件，去掉 emotionLocalization 项的注释，值改为true。 
 
 
 
 
  八、解决上传附件有中文名的，下载附件时下载失败问题 
 
 
 
 
  修改tomcat配置文件 /conf/server.xml 
 
 
 

   <Connector port="8080" protocol="HTTP/1.1" 
 
 
 

   connectionTimeout="20000" 
 
 
 

   redirectPort="8443" URIEncoding="UTF-8"/> 
 
 
 
 
  九、自定义上传路径两种方式（时间不够改天再补） 
 
 
 
 
  参考文档: 
 
 

 
 

  1. 官方文档
     
  2. http://blog.csdn.net/huangwenyi1010/article/details/51638123#reply 三部曲
  3. http://blog.csdn.net/yuancenyi/article/details/53327414 自定义上传路径
 

 
 
 


                

        

        

    




    

      

        

            

              
                
                  elementf
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
SSH的ueditor使用

				
			

			

				

					04-03
				

			

		

		

			
				
研究很久才终于研究出来，网上很多都是骗人的，下载之后不能用，后来自己静下心来慢慢琢磨，就行了

			
		

	



                

              
                



	

		

			

				
					
UEditor (JSP 1.4.3版本) 集成到ssh框架中

				
			

			

				

					dawuafang
				

				

					12-12
					
					161
					
				

			

		

		

			
				
一：集成简单步骤
1，下载UEditor文件
  下载地址


2，添加jar包
  打开下载的文件，结构如下所示，将jsp-lib下面的jar包添加到项目的web-inf下的lib文件夹中




3，导入源文件
  在webContent路径下面创建文件夹(ueditor)，将下载的文件全都拷贝进去（除去上部添加的jar包）


4，修改jsp文件
 1),首先...

			
		

	



                


  
              

                


	

		

			

				
					
将Ueditor整合到ssh框架

				
			

			

				

					wu560130911的专栏
				

				

					12-09
					
					1815
					
				

			

		

		

			
				
前几天因为所做项目要用到Ueditor，所以就研究了下ueditor,我先用servlet做了下测试发现可以用，包括文件上传，图片上传、管理等，具体代码请看链接Ueditor,
因而我就直接将其加到我ssh的项目里，但是发现老是出错（一个红色的叉），当我调试代码时发现，request里的东西都被struts2过滤掉了，因而老是出错，于是我打算重写过滤器，
为了能够兼容struts2，我直接找到

			
		

	





	

		

			

				
					
UEditor和SSH的整合

				
			

			

				

					10-29
				

			

		

		

			
				
百度富文本编辑器和SSH框架的整合,用的是Intellij idea编译，代码myecliplse，eclipse一样可以用，

			
		

	



		

			
		



	

		

			

				
					
ssh框架整合+ueditor富文本编辑器demo

				
			

			

				

					11-13
				

			

		

		

			
				
ssh框架整合demo，附带调试完毕的ueditor富文本编辑器demo，项目中webContent下的readme文件夹，下有readme.txt项目说明文档（ssh整合的文档），ueditor富文本编辑器的demo说明文档，见我的博客文章，有对应的一篇。

			
		

	





	

		

			

				
					
ueditor jsp版

				
			

			

				

					04-12
				

			

		

		

			
				
在描述中提到，由于ueditor的官方网站有时可能会出现访问不稳定的情况，导致部分开发者无法顺利下载到所需资源，因此这里提供了ueditor1.4的jsp版本，以便开发者能够便捷地获取并使用。这个版本确保了即使在官方源不...

			
		

	





	

		

			

				
					
UEditor JSP版 demo

				
			

			

				

					08-07
				

			

		

		

			
				
这个"UEditor JSP版 demo"是一个原创的示例项目，旨在为开发者提供详尽的教程和实践指导，帮助他们快速理解和集成UEditor到JSP应用程序中。  在UEditor JSP版中，你需要了解以下几个核心知识点：  1. **UEditor概述*...

			
		

	





	

		

			

				
					
vue项目中使用ueditor的实例讲解

				
			

			

				

					08-27
				

			

		

		

			
				
在本篇文章中，我们将一步一步地指导您如何在Vue项目中使用ueditor，包括如何配置ueditor、如何在Vue组件中使用ueditor等内容。  一、ueditor简介  ueditor是一个开源的富文本编辑器，支持多种格式的文本编辑，包括...

			
		

	





	

		

			

				
					
一步步教你在Asp.net Mvc中使用UEditor编辑器

				
			

			

				

					10-20
				

			

		

		

			
				
在Asp.net Mvc中使用UEditor编辑器是一个常见的需求，因为UEditor是百度推出的一款功能丰富的富文本编辑器，它提供了多种编辑功能，如图片上传、视频插入、代码高亮等，非常适合用于网站内容的编辑和管理。...

			
		

	





	

		

			

				
					
详解在YII2框架中使用UEditor编辑器发布文章

				
			

			

				

					10-17
				

			

		

		

			
				
主要介绍了在YII2框架中使用UEditor编辑器发布文章,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
SSH网站开发实录（8）Ueditor的入门使用

				
			

			

				

					程序员
				

				

					12-08
					
					783
					
				

			

		

		

			
				
Ueditor是一款比较流行的富文本编辑器
关于Ueditor的详细介绍请到官方网站：http://ueditor.baidu.com/website/index.html
官方下载：http://ueditor.baidu.com/website/download.html#ueditor
我使用的是jsp的utf8如下：


下载后解压
官方开发文档：http://fex.bai

			
		

	





	

		

			

				
					
ueditor_v1.4.3_utf8_jsp用于ssh框架时图片的上传

				
			

			

				

					撸码毁一生
				

				

					08-11
					
					857
					
				

			

		

		

			
				
1，首先下载ueditor1_4_3-utf8-jsp并解压，下载地址：http://ueditor.baidu.com/website/download.html

2，在eclipse里新建一个 Dynamic web项目（我新建的项目为UeditorDemo）,建好项目后，会有一个WebContent文件夹，在此目录下新建文件夹ueditor1_4_3，

然后把解压的ueditor

			
		

	





	

		

			

				
					
Struts项目中集成使用ueditor

				
			

			

				

					wszy1301的博客
				

				

					09-30
					
					366
					
				

			

		

		

			
				
因为项目需要，集成ueditor，本博客仅做个人笔记使用。先在实现的是index.jsp提交输入的点击登录跳转到，SULoginAction不做任何操作。然后跳转到HelloWorld.jsp进行编辑框的前端显示。编辑框的显示点击修改跳转到，SUManagerAction，讲editor中的内容存储到数据库中，注意User此时有myeditor但是没有content。content并没有使用。还差

			
		

	





	

		

			

				
					
SSH网站开发（9）Ueditor运用在SpringMVC+Spring+Hibernate中

				
			

			

				

					程序员
				

				

					12-14
					
					745
					
				

			

		

		

			
				
可能遇到的问题：Ueditor界面显示不出来
在进行到新闻添加的时候集成了Ueditor到SSH中，一切都进行的是那么的顺利和美好。
但是进行到新闻的修改模块的时候出现了“”Ueditor界面显示不出来“的问题。而且测试发现修改界面的Ueditor一直是初始化准备工作结束不了（也就是初始化失败了界面显示不出来了）


原因分析：
分析一：可能是新闻修改界面关于Ueditor的代码写的有

			
		

	





	

		

			

				
					
SSH框架下Ueditor相关配置问题

				
			

			

				

					da_ye_zi的博客
				

				

					09-25
					
					211
					
				

			

		

		

			
				
1.下载UEditor【1.4.3 JSP版本】，关于Ueditor的配置也可以参照官网JSP 使用说明。 

2.把下载的Ueditor文件导入到工程中的WebContent目录下（可以直接把下载的压缩包解压之后复制粘贴进来）：



3.导入完成后，把Ueditor文件中lib目录下的所有的包放入WEB-INF目录中的lib里面。



4.对导入的Ueditor文件进行配置：

    1&...

			
		

	





	

		

			

				
					
整合UEditor，SSH下

				
			

			

				

					a281246240的专栏
				

				

					01-26
					
					2387
					
				

			

		

		

			
				
一、整合所需UEditor原代码


这个可以到http://ueditor.baidu.com/website/download.html#ueditor下载相应版本。
二、导包


把上述包拷贝到WEB-INF的lib下
三、JSP页面处理
 /ueditor/ueditor.config.js">
    /ueditor/ueditor.all.min.js">

			
		

	





	

		

			

				
					
UEditor1.4.3在SSH框架项目中上传图片的设置

				
			

			

				

					诸葛从容
				

				

					12-22
					
					1338
					
				

			

		

		

			
				
UEditor的基本资料就不在多少，网上很多。。
这里记录一下在SSH框架项目中配置实现图片上传的功能。
直接导入UEditor的话，上传图片会提示“找不到本地资源”，具体原因还没看，好像是UEditor用到的action与struts2中的上传文件模块有冲突，解决办法是自定义struts2拦截器，当UE要上传图片时屏蔽到Struts2：
public class UeditorFilter

			
		

	





	

		

			

				
					
【有事找我网】Ueditor+JSP+Struts2使用方法

				
			

			

				

					u010800530的专栏
				

				

					03-24
					
					2446
					
				

			

		

		

			
				
问题说明：首先说明下环境：Ueditor 1.4.3+Sturts2，JDK1.6，Tomcat6.0。在做这个配置的时候出现了问题，就是图片不能够正常上传，总是会出现上传失败。在下边就会告诉如何解决“图片上传失败”的问题


1、Ueditor的安装
首先，我们从官方网站下载Ueditor JSP版本，UTF-8和GBK编码视自己选择：


然后解压，把解压后的文件放在webroo

			
		

	





	

		

			

				
					
关于SSH与百度ueditor整合的时候出现的问题

				
			

			

				

					Talk is cheap，show me the code.
				

				

					10-24
					
					811
					
				

			

		

		

			
				
SSH与ueditor之间的恩恩怨怨

			
		

	





	

		

			

				
					
vue的ueditor怎么生成html,vue项目中如何使用ueditor

					
最新发布

				
			

			

				

					05-30
				

			

		

		

			
				
为了在Vue项目中使用UEditor，你需要先安装UEditor的npm包。你可以使用以下命令进行安装：

```
npm install vue-ueditor-wrap --save
```

安装完成后，你可以在Vue组件中引入UEditor并使用。下面是一个简单的示例：

```html
<template>
  <div>
    <vue-ueditor-wrap :options="editorConfig" v-model="content"></vue-ueditor-wrap>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      content: '',
      editorConfig: {
        UEDITOR_HOME_URL: '/static/UEditor/', // UEditor资源文件的根目录
        serverUrl: '/api/upload', // UEditor上传图片和文件的后端接口地址
        toolbars: [
          [
            'undo', 'redo', '|', 'bold', 'italic', 'underline', 'strikethrough', 'removeformat', '|', 'insertorderedlist', 'insertunorderedlist', '|', 'link', 'unlink', 'anchor', '|', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'fullscreen'
          ]
        ],
      }
    }
  }
}
</script>
```

这个示例中，我们首先在组件中引入了`vue-ueditor-wrap`组件。然后我们在`data`中定义了一个`content`变量来保存UEditor编辑器中的内容，并定义了一个`editorConfig`对象来配置UEditor。

最后，我们在模板中使用`vue-ueditor-wrap`组件，将它的`options`属性设置为我们定义的`editorConfig`对象，并使用`v-model`指令将编辑器中的内容绑定到`content`变量上。

当用户在UEditor中编辑内容时，`content`变量的值也会相应地更新。你可以在组件中使用`content`变量来获取编辑器中的内容，以便将其保存到后端或进行其他操作。

希望这个示例对你有所帮助！

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值