百度富文本编辑器ueditor使用

最近项目中有个动态文章发布,用到了ueditor 编辑器 在此遇到一些问题 比如 jsp目录下的lib jar包 直接path 出现问题 弄到web-info 下后就不出现问题了。


第一步:首先到http://ueditor.baidu.com/website/download.html下载包 我下载的是1.4.3jsp版本 他的目录结构一打开看就清楚了


效果如图


项目目录结构:



index.jsp页面代码如下 多余的就不解释

<span style="font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="http://127.0.0.1:8080/ueditor/ueditor/themes/default/css/ueditor.css" />
</head>
<body>
<!-- 导入js -->
<script type="text/javascript" charset="utf-8" src="http://127.0.0.1:8080/ueditor/ueditor/ueditor.config.js"></script>  
  
    <!--使用版-->  
    <script type="text/javascript" charset="utf-8" src="http://127.0.0.1:8080/ueditor/ueditor/ueditor.all.js"></script>  
    
    <script type="text/javascript" src="http://127.0.0.1:8080/ueditor/ueditor/lang/zh-cn/zh-cn.js"></script>  

<form action="HtmlServlet" method="post">
<!-- context 后台去文本中的值 比如 serlvet中reqeust.getParamer("context") -->
<textarea name="context" id="myEditor">这里写你的初始化内容</textarea>
<script type="text/javascript">
    //var editor = new UE.ui.Editor();
    //editor.render("myEditor");
    //1.2.4以后可以使用一下代码实例化编辑器
    UE.getEditor('myEditor');
</script>
<input type="submit" value="提交">
</form>
</body>
</html></span>

查看 ueditor.config.js 修改  建议修改为:

//推荐以这种方式进行绝对路径配置
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";


我的配置


其中ueditor.config.js 还有许多参数 可以根据说明修改


在JSP中,上传图片需要配置:ueditor—>jsp—>config.json这个文件中的imageUrlPrefix和imagePathFormat这两个路径 上传后在前台显示

这里面还有一些参数 更改方式都一样


到这一步差不多就完了 有时候可能会出现一些问题:比如:在用浏览器调试的时候会出现某某后台配置不正确,无法使用上传图片,比如:

An error occurred at line: 12 in the jsp file: /ueditor/jsp/controller.jsp
ActionEnter cannot be resolved to a type
9:
10: String rootPath = application.getRealPath( "/" );
11:
12: out.write( new ActionEnter( request, rootPath ).exec() );
13:
14: %>

也许是包冲突  或者要把ueditor中的jsp下面的lib中的jar考到web-info lib文件夹中add path 应该就没问题了

百度富文本编辑器UEditor是一款基于JavaScript的所见即所得富文本编辑器,可以轻松地将其集成到Java Web项目中,为用户提供更好的编辑体验。下面简单介绍一下在Java Web项目中使用百度富文本编辑器UEditor的方法。 1.下载UEditor 首先,需要从百度UEditor官网上下载UEditor的源代码。下载地址为:http://ueditor.baidu.com/website/download.html 2.将UEditor集成到Java Web项目中 下载完成后,将UEditor的源代码解压缩,并将解压后的文件夹复制到Java Web项目的WebContent目录下的任意一个子目录中(比如说WebContent/ueditor)。然后,将UEditor中的jsp目录下的所有文件复制到Java Web项目的WebContent目录下的任意一个子目录中(比如说WebContent/jsp)。 3.配置UEditor 在Java Web项目的WebContent目录下新建一个名为config.json的文件,该文件的内容如下: { "imageActionName": "uploadimage", "imageFieldName": "upfile", "imageMaxSize": 2048000, "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "imageCompressEnable": true, "imageCompressBorder": 1600, "imageInsertAlign": "none", "imageUrlPrefix": "", "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlActionName": "uploadscrawl", "scrawlFieldName": "upfile", "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlMaxSize": 2048000, "scrawlUrlPrefix": "", "scrawlInsertAlign": "none", "snapscreenActionName": "uploadimage", "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "snapscreenUrlPrefix": "", "snapscreenInsertAlign": "none", "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherActionName": "catchimage", "catcherFieldName": "source", "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "catcherUrlPrefix": "", "catcherMaxSize": 2048000, "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "videoActionName": "uploadvideo", "videoFieldName": "upfile", "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", "videoUrlPrefix": "", "videoMaxSize": 102400000, "videoAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid" ], "fileActionName": "uploadfile", "fileFieldName": "upfile", "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", "fileUrlPrefix": "", "fileMaxSize": 51200000, "fileAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ], "imageManagerActionName": "listimage", "imageManagerListPath": "/ueditor/jsp/upload/image/", "imageManagerListSize": 20, "imageManagerUrlPrefix": "", "imageManagerInsertAlign": "none", "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "fileManagerActionName": "listfile", "fileManagerListPath": "/ueditor/jsp/upload/file/", "fileManagerUrlPrefix": "", "fileManagerListSize": 20, "fileManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ] } 该文件是UEditor的配置文件,主要配置了上传文件的相关设置。 4.在JSP页面中使用UEditor 在需要使用UEditor的JSP页面中,添加如下代码: <!-- 加载ueditor编辑器js文件 --> <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"></script> <!-- 创建编辑器 --> <script type="text/javascript"> var editor = UE.getEditor('editor'); </script> 其中,ueditor.config.js和ueditor.all.min.js是UEditor的核心文件,需要在页面中引入。editor是页面中一个div元素的id,表示要将该div元素转化为UEditor编辑器。 至此,就完成了在Java Web项目中使用百度富文本编辑器UEditor的集成。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值