百度富文本编辑器UEditor是一款基于Javas
cript的所见即所得
富文本编辑器,可以轻松地将其集成到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文件 -->
<s
cript type="text/javas
cript" src=https://blog.csdn.net/alisky119/article/details/"${pageContext.request.contextPath}/
ueditor/
ueditor.config.js"></s
cript>
<s
cript type="text/javas
cript" src=https://blog.csdn.net/alisky119/article/details/"${pageContext.request.contextPath}/
ueditor/
ueditor.all.min.js"></s
cript>
<!-- 创建编辑器 -->
<s
cript type="text/javas
cript">
var editor = UE.getEditor(
'editor
');
</s
cript>
本文地址:http://lanlanwork.gawce.com/quote/10511.html
阁恬下 http://lanlanwork.gawce.com/ , 查看更多