下载文档原格式
在java项⽬中加⼊百度富⽂本编辑器富⽂本编辑器在项⽬中很常见，他可以将⽂本，图⽚等信息存⼊数据库，在编辑⼀些图⽂混排的信息的时候很有⽤，⽐如商城项⽬的商品详情页，包含很多带有样式的⽂字和图⽚。
此前⼀直使⽤的百度的富⽂本编辑器ueditor。
直接说怎么⽤。
1.⾸先去下载安装包，把它放在webapp下⾯，如下所⽰。
⾄于如何下载，可⾃⾏百度。
2.maven项⽬的话需要在pom.xml中加⼊如下语句，以导⼊所需要的包。
<!-- 百度富⽂本 --><dependency><groupId>com.github.qiuxiaoj</groupId><artifactId>ueditor</artifactId><version>1.1.1</version></dependency><dependency><groupId>org.json</groupId><artifactId>json</artifactId><version>20170516</version></dependency>如果不是maven项⽬则将安装包中jsp下的lib下的jar包拷⼊项⽬的lib下即可。
3.在页⾯中引⼊相关的js⽂件。
<!-- 百度编辑器 --><script type="text/javascript" charset="utf-8"src="./ueditor1_4_3/ueditor.config.js"></script><script type="text/javascript" charset="utf-8"src="./ueditor1_4_3/ueditor.all.js"></script><script type="text/javascript" charset="utf-8"src="./ueditor1_4_3/lang/zh-cn/zh-cn.js">4.配置ueditor的相关⽂件，⾸先配置ueditor.config.js这个⽂件，主要是为了能让上传图⽚等功能⽣效，才需要配置这个⽂件。
ultraedit编码没有utf-8 -回复UltraEdit是一款功能强大的文本编辑器，广泛用于程序编写、文本处理和文件管理等领域。
然而，有一点让使用者感到困惑和不满的是，UltraEdit 没有原生支持UTF-8编码。
本文将一步一步回答关于UltraEdit编码的问题，并提供解决方案。
第一步：了解编码在介绍UltraEdit的编码问题之前，我们需要先了解编码的概念。
编码是一种将字符映射到数字的过程，它使得计算机可以处理和存储文本。
常见的编码包括ASCII、UTF-8、GBK等。
第二步：UltraEdit中的编码设置UltraEdit默认使用ASCII编码进行文本的读写，这种编码只支持英文等基本字符，不支持中文和其他特殊字符。
因此，对于需要处理非ASCII字符的用户来说，这样的编码设置是不够满足需求的。
第三步：解决方案由于UltraEdit没有原生支持UTF-8编码，我们需要借助一些工具和技巧来实现UTF-8编码的支持。
以下是几种常用的解决方案：1. 使用外部工具：UltraEdit提供了“运行”功能，可以调用外部工具来完成一些特定的任务。
我们可以利用这个功能来调用其他编辑器或转码工具，将UTF-8编码的文件转换为UltraEdit可以处理的编码（比如ASCII 或GBK），然后再进行编辑和保存。
2. 手动转码：如果你不想依赖外部工具，也可以选择手动转码。
首先，需要用其他支持UTF-8编码的编辑器打开文件，将其保存为ASCII或GBK 编码，然后再用UltraEdit打开和编辑。
当你完成编辑后，再将文件转换回UTF-8编码即可。
3. 扩展插件：虽然UltraEdit本身不支持UTF-8编码，但是它支持插件扩展。
你可以搜索并安装一些第三方插件，来增加对UTF-8编码的支持。
请注意，这种方式可能需要一些额外的配置和学习。
第四步：选择合适的解决方案在选择合适的解决方案时，你需要考虑以下几个方面：- 文件类型：如果你只是处理纯文本文件，那么使用外部工具或手动转码可能是最简单的选择。
thinkPHP下ueditor的使⽤⽅法详解本⽂实例讲述了thinkPHP下ueditor的使⽤⽅法。
分享给⼤家供⼤家参考，具体如下：2、下载对应的php版的，下载后重命名为ueditor，根据需要放到对应的项⽬⽬录中。
我放的位置为Public/admin⽂件夹下，admin为后台的访问⼊⼝⽂件⽬录。
3、在项⽬中的使⽤⾸先需要引⼊核⼼的js⽂件：<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.all.js"></script>然后再⽂件中加⼊<textarea>标签，注意设置id属性复制代码代码如下:<textarea name="content" id="EditorId"> </textarea>接着是初始化编辑器，注意配置路径<script type="text/javascript" charset="utf-8">window.UEDITOR_HOME_URL = "__PUBLIC__/admin/ueditor/";window.onload=function(){window.UEDITOR_CONFIG.initialFrameHeight=300;//编辑器的⾼度window.UEDITOR_CONFIG.initialFrameWidth=800;//编辑器的宽度var editor = new UE.ui.Editor({imageUrl : '__APP__/Editor/uploadImage',fileUrl : '__APP__/Editor/uploadFile',imagePath : '',filePath : '',imageManagerUrl:'__APP__/Editor/imageManage', //图⽚在线管理的处理地址imageManagerPath:'__ROOT__/'});editor.render("EditorId");}</script>注意：1、UEDITOR_HOME_URL的路径配置为ueditor所在的位置。
ueditor1_4_3_3编辑器的应⽤教程使⽤的是ueditor1_4_3_3版本。
下载好以后，解压，把解压⽂件夹命名为ueditor然后把ueditor⽬录整个复制到webapp下在⾃⼰需要编辑器的页⾯引⼊ueditor的js在body中:<head></head>中:<script type="text/javascript">//实例化编辑器//建议使⽤⼯⼚⽅法getEditor创建和引⽤编辑器实例，如果在某个闭包下引⽤该编辑器，直接调⽤UE.getEditor('editor')就能拿到相关的实例var ue = UE.getEditor('editor');</script>把ueditor/jsp/lib下的jar包全部添加到项⽬⾥。
另外还需要⼀个jar包，此处在pom.xml配置了：<dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version></dependency>然后在ueditor.config.js中找到,zIndex : 900 并去掉注释，修改值为 999999修改附件上传⽬录:部署，去掉部署项⽬名：保存以后要展⽰时，在需要代码⾼亮的页⾯配置:还要把后台取数据的ajax变为同步加载！需要展⽰的时候⾃动换⾏在相应css添加下⾯代码即可：编辑器中添加代码是背景⾊修改:编辑器中图⽚⾃适应:iframe.css中添加/*可以在这⾥添加你⾃⼰的css*/img {max-width: 100%; /* 图⽚⾃适应宽度 */}body {overflow-y: scroll !important;}.view {word-break: break-all;}.vote_area {display: block;}.vote_iframe {background-color: transparent;border: 0 none;height: 100%;}⼀些技巧：uuditor常⽤的js函数在ueditor/index.html⾥⾯能找到，⽐如获取编辑框⾥⾯的内容等等。
Ueditor在线编辑器配置示例1.简介UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。
2.下载首页地址：/website/index.html，点击下载，可以根据需要下载php、aps、jsp、.net版本。
由于1.4版本和1.3版本内容变更较大，本例中使用了最新版本1.4.3.1 jsp utf-8 版本进行测试。
3.配置下载ueditor后，放入系统的js库中，由于本例的相同功能的ewebeitor 放在webroot下，本例中也直接放入的webroot下，结构图如下：首先配置通用配置的控制器路径，文件名为：ueditor.config.js。
此文件配置需要对应下载的版本，即jsp版对应修改：serverUrl: URL + "jsp/controller.jsp"修改了通用配置后，还需要修改对应的上传文件、图片等路径，我们需要根据我们配置的版本去设置对应目录的内容，jsp版本如下：实际配置如下图：下面还有对应图片、视频的配置，与图片配置类似。
4.问题4.1jar问题需要的jar都已在ueditor中包含，直接拷贝至项目的lib中并加入classpath中即可。
1.4.3版本需要commons-io-2.4.jar支持。
所以在buildpath中需要将该包放置靠前。
4.2拦截器问题对于使用了Struts2或配置了其他拦截器的，需要将该请求放行如Struts2一般配置为：对于此类会拦截jsp的请求的配置，可以根据项目需要，1.改为*.action,*.do之类的请求匹配2.加入自己的拦截器，如本例所配置的com.linewell.core.filter.ExtendStrutsPrepareFilter中，不解的可以参照：/krysml/article/details/90065335.示例本例中上述配置好之后，可以实现图片编辑等内容页面代码示例如下：6.自定义：对于需要更多特性的定义，可以参照ueditor官网需要将图片插入数据库的，可以将ueditor-1.1.2.jar进行反编译，修改对于需要完全自定义的，可以直接抛弃ueditor-1.1.2.jar的引用，直接使用自定义的方法进行功能设定，返回对应的json数据即可。
ueditor1_4_3_3编辑器修改⽂章html的body中:<script id="editor" type="text/plain" ></script>js中://实例化编辑器//建议使⽤⼯⼚⽅法getEditor创建和引⽤编辑器实例，如果在某个闭包下引⽤该编辑器，直接调⽤UE.getEditor('editor')就能拿到相关的实例var ue = UE.getEditor('editor',{//initialFrameWidth :980,//设置编辑器宽度initialFrameHeight:500,//设置编辑器⾼度scaleEnabled:true});后台取出原本⽂章内容放⼊编辑器（ajax回调函数中）：var content = data.body;//判断ueditor 编辑器是否创建成功ue.addListener("ready", function () {// editor准备好之后才可以使⽤ue.setContent(content);});例⼦：html代码:<!doctype html><html><head><meta charset="UTF-8"><title>oneUser</title><link href="/css/blog_style.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="/js/jquery.min.js"></script><script type="text/javascript" src="/js/datepattern.js"></script><script type="text/javascript" src="/ueditor/ueditor.config.js"></script><script type="text/javascript" src="/ueditor/ueditor.all.js"></script><script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script><script type="text/javascript" src="/js/commons_head_foot.js"></script><script type="text/javascript" src="/js/modifyBlog.js"></script></head><body><div><div id="commons_head"></div><div class="navigation"><span>标题:</span><input id="essay_title" type="text" style="font-size:18px;font-weight:bold;"/><br><br>评论:<span id="evaluateCount"></span>点赞:<span id="admireCount"></span><br><span id="createTime"></span></div><div class="center_body" style="margin-top:5px;"><script id="editor" type="text/plain"></script><input type="button" id="modifyContent" value="提交修改" style="float:right;"/></div><div id="commons_foot"></div></div></body></html>js代码:$(function(){//实例化编辑器//建议使⽤⼯⼚⽅法getEditor创建和引⽤编辑器实例，如果在某个闭包下引⽤该编辑器，直接调⽤UE.getEditor('editor')就能拿到相关的实例var ue = UE.getEditor('editor',{//initialFrameWidth :980,//设置编辑器宽度initialFrameHeight:500,//设置编辑器⾼度scaleEnabled:true});var ur = window.location.search;var essayId = ur.substring(9,ur.length);$.ajax({url:"/frame/myEssayDetails/"+essayId,type:"get",contentType:"application/json;charset=utf-8",dataType:"json",success:function(data){$("#essay_title").val(data.title);var essayId = data.id;$("#createTime").html(new Date(data.createTime).pattern("yyyy-MM-dd hh:mm:ss")); $("#evaluateCount").html(data.evaluateCount);$("#admireCount").html(data.admireCount);var content = data.body;//判断ueditor 编辑器是否创建成功ue.addListener("ready", function () {// editor准备好之后才可以使⽤ue.setContent(content);});},error:function(){alert("error");}});$("#modifyContent").click(function(){var allHtml = UE.getEditor('editor').getContent();var title = $("#essay_title").val().trim();$.ajax({url:"/frame/essay",type:"post",contentType:"application/json;charset=utf-8",data:JSON.stringify({"id":essayId,"title":title,"body":allHtml}),dataType:"json",success:function(data){if (data.success==true) {var url = "/index.html";window.location.href=url;} else {alert(data.message);}},error:function(){alert("出错了");}});});});。
ECSHOP安装百度编辑UEditor教程先看效果图：教程开始：打开这两个文件，一个是商品编辑，一个是文章编辑/admin/templates/goods_info.htm/admin/templates/article_info.htm查找：1 {$FCKeditor}修改成：<script type="text/javascript" charset="utf-8" src="../includes/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="../includes/ueditor/ueditor.all.min.js"> </script> <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--><!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--><script type="text/javascript" charset="utf-8" src="../includes/ueditor/lang/zh-cn/zh-cn.js"></script> <style type="text/css">.clear {clear: both;}</style><textareaid="goods_desc" name="goods_desc" style="width:100%;heigh t:500px;"> {$goods.goods_desc}</textarea><script type="text/javascript">delete(Object.prototype.toJSONString);UE.getEditor('goods_desc')</script>两个文件都这样修改。
JSP版（utf8编码）的Ueditor百度⽂章编辑器配置以及使⽤说明⼆话不说，先上图：我配置好的效果⼤致是这些功能：基本的⽂字编辑功能、图⽚上传功能、附件上传功能、百度/⾕歌地图搜索截图、视/⾳频发布功能。
这个插件是现今我⽤过觉得最舒服的编辑器，功能齐全强⼤，稍微修改下配置即可投放使⽤，来，⾛起！1、最新版的官⽅插件跟先前的版本不⼀致，所以我还是⽤先前的版本，是今年5、6⽉份版本。
插件包JSP版（utf8编码）下载地址（1分不算多吧，^_^，我的⾦币较少，赞助我点⾦币哈，评论即可获得1分）2、⽡公司⽤eclipse来开发，但是⼤多数⼈都是⽤myeclipse，所以我⽤myeclipse来演⽰：⾸先，新建⼀个webProject项⽬随便起个名字，如a，把解压后的ueditor插件包复制黏贴到webRoot根⽬录下然后打开editor_config.js这个配置⽂件，⼀看，⽡擦，乱码！然后点击项⽬a，按住Ctrl+回车，把项⽬a的环境从gbk换成utf8编码，此时乱码问题解决。
然后再这个配置⽂件的29⾏，找到URL= window.UEDITOR_HOME_URL||"/t/ueditor/";这句话，改成‘URL=window.UEDITOR_HOME_URL||"/项⽬名/ueditor/’即‘URL= window.UEDITOR_HOME_URL||"/a/ueditor/’；接着修改index.jsp⽂件，在<head/>上⾯加⼊引⽤的js包和css样式代码：[html]1. <script type="text/javascript" charset="utf-8" src="./ueditor/editor_config.js"></script>2. <script type="text/javascript" charset="utf-8" src="./ueditor/editor_all.js"></script>3. <LINK rel=stylesheet href="ueditor/themes/default/ueditor.css">然后在<body>标签⾥加⼊⽡调好的编辑器代码，如下：[html]1. <div align="center">2. <textarea id="newsEditor" name="content"> </textarea>3. <br/>4. <input type="submit" value="发布" >5. <script type="text/javascript">6.7. UE.getEditor('newsEditor');8.9. </script>10. lt;/div>保存的时候把⾸⾏的pageEncoding="ISO-8859-1"改为pageEncoding="utf-8"，即可保存部署上传，然后浏览器打开http://localhost:8888/a/，我设置的端⼝是8888，⼤多数⼈⽤的都是http://localhost:8080/a/效果图就这样。
JSP中eWebEditor使用说明Ewebeditor使用说明：一、部署方式：1、直接把压缩目录中的文件拷贝到您的网站发布目录下；2、配置对应WEB-INF下文件，把eWebEditor文件夹下WEB-INF/web.xml中复制到你的应用中的WEB-INF/web.xml中；3、把WEB-INF下的Style.xml和Button.xml复制到你的应用中的WEB-INF目录下；4、把eWebEditor/WEB-INF/lib下的dom4j.jar和jspsmartupload.jar包复制到你应用的WEB-INF/lib下；注：net.jar为ewebeditor原/WEB-INF/classes下的class文件，我把它打包后放到应用的lib下，以免跟其它class混淆；5、在你要调用编辑器的代码中加入：在</head>前加入：提交表单时触发这个函数把eWebEditor中的值复制到你的表单中，然后在你的form中调用它：<form name="form1" onsubmit=" subchk()">6、重新启动服务器即可。
二、设置：界面修改：一般只修改/WEB-INF目录下面的style.xml和button.xml就可以了，button.xml为编辑界面配置文件，如果有菜单显示不全，可以在里面修改大小。
====================================== ==============上传图片路径设置：//默认上传默认目录为xx/upload/，xx为你的根目录//此处设置上传文件保存路径,注意路径要由ROOT开始===3处======================//修改此处需修改WEB-INF/Style.xml文件对应处<suploaddir>/upload/</suploaddir>//修改此处需修改eWebEditor.jsp文件对应处//修改此处需修改upload.jsp文件对应处例如要传到根目录的/upload/下面:upload.jsp中String sUploadFilePath="/upload/";Style.xml中<suploaddir>/upload/</suploaddir>eWebEditor.jsp 中String sUploadFilePath="../upload/";//设置文件上传后在ewebeditor编辑器中图片显示地址这样就好了。
最近做项目要用到在线编辑器。
（也就是现在编写博客用的东东）。
经一番折腾发现百度编辑器Ueditor 真心好用，配置也方便。
废话不多，j进入正题：首先，在Ueditor首页下载编辑器。
我用的是开发板 1.4.3jsp版本utf-8版。
解压后可以看到如下目录：myeclipse下新建项目，在项目的WebRoot下新建文件夹ueditor。
将ueditor1_4_3-utf8-jsp目录下的文件全部复制到ueditor目录下，当然，/jsp/lib下的jar得放到项目WEB-INF/下的lib文件夹下。
出现错误：Errors occurred during the build.Errors running builder 'JavaScript Validator' on project 'a'.7 这是Myeclipse的bug。
可以在通过：右键项目->Properties->Builders->将Javascripte Validator前的复选框去掉 ->OK 解决。
然后下面是参照Ueditor官方文档给出的例子写的测试页：在这<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>ueditor demo</title><!-- 配置文件 --><script type="text/javascript"src="ueditor/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript"src="ueditor/ueditor.all.js"></script><link rel="stylesheet" type="text/css"href="udeditor/themes/default/css" /></head><body><!-- 实例化编辑器 --><script type="text/javascript">var ue = UE.getEditor('container');</script><!-- 加载编辑器的容器 --><textarea id="container" name="content">这里写你的初始化内容</textarea></body></html>就这么简单，编辑器出现了。
Ueditor在线编辑器配置示例
1.简介
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。
2.下载
首页地址：/website/index.html，点击下载，可以根据需要下载php、aps、jsp、.net版本。
由于1.4版本和1.3版本内容变更较大，本例中使用了最新版本1.4.3.1 jsp utf-8 版本进行测试。
3.配置
下载ueditor后，放入系统的js库中，由于本例的相同功能的ewebeitor 放在webroot下，本例中也直接放入的webroot下，结构图如下：
首先配置通用配置的控制器路径，文件名为：ueditor.config.js。
此文件配置需要对应下载的版本，即jsp版对应修改：
serverUrl: URL + "jsp/controller.jsp"
修改了通用配置后，还需要修改对应的上传文件、图片等路径，我们需要根据我们配置的版本去设置对应目录的内容，jsp版本如下：
实际配置如下图：
下面还有对应图片、视频的配置，与图片配置类似。
4.问题
4.1jar问题
需要的jar都已在ueditor中包含，直接拷贝至项目的lib中并加入classpath中即可。
1.4.3版本需要commons-io-
2.4.jar支持。
所以在buildpath中需要将该包放置靠前。
4.2拦截器问题
对于使用了Struts2或配置了其他拦截器的，需要将该请求放行如Struts2一般配置为：
对于此类会拦截jsp的请求的配置，可以根据项目需要，
1.改为*.action,*.do之类的请求匹配
2.加入自己的拦截器，如本例所配置的
com.linewell.core.filter.ExtendStrutsPrepareFilter中，
不解的可以参照：
/krysml/article/details/9006533
5.示例
本例中上述配置好之后，可以实现图片编辑等内容
页面代码示例如下：
6.自定义：
对于需要更多特性的定义，可以参照ueditor官网
需要将图片插入数据库的，可以将ueditor-1.1.2.jar进行反编译，修改
对于需要完全自定义的，可以直接抛弃ueditor-1.1.2.jar的引用，直接使用自定义的方法进行功能设定，返回对应的json数据即可。
