UE.Editor使用总结
官方API:http://ueditor.baidu.com/doc/#UE.Editor
开始使用:
1.官网下载资源
http://ueditor.baidu.com/website/download.html,我使用的jsp语言
2.页面需要引入:
<script type="text/javascript" charset="utf-8" src="ueditor.config.js">script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.js">script>3配置文件修改
文件夹根目录/ueditor.config.js
里面的编辑器资源文件根路径:
var URL = “/ueditor_jsp/”;
工具栏,可以在此文件修改,或者在初始化时添加
toolbars
我用到了图片上传,所以要配置图片保存路径
文件夹根目录/jsp/congif.json
“imageUrlPrefix”: /* 图片访问路径前缀 */
“imagePathFormat”:, /* 上传保存路径,可以自定义保存路径和文件名格式 */
4准备工作做完,可以撸代码了
<body>
<form>
<script type="text/plain" id="myEditor">
<p>这里我可以写一些输入提示p>
script>
form>
body>
<script type="text/javascript">
UE.getEditor('myEditor', {
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars: [['FullScreen', 'simpleupload', 'Source', 'Undo', 'Redo', 'Bold', 'test']],
//focus时自动清空初始化时的内容
autoClearinitialContent: true,
//关闭字数统计
wordCount: false,
//关闭elementPath
elementPathEnabled: false,
//默认的编辑区域高度
initialFrameHeight: 300
//更多其他参数，请参考ueditor.config.js中的配置项
})
script>
可以自定义监听器:
editor.addListener("ready", function () {
// editor准备好之后才可以使用
editor.setContent("${content}");
});
后台怎么拿到的数据 ?
request.getParameter("myContent")
我没有做处理,直接存入数据库
附带一段内容格式:
<p>发发发<img src="http://localhost//ueditor/jsp/upload/image/20170316/1489669091554042661.png" title="1489669091554042661.png" alt="168x168.png"/>有张图吗<img src="http://localhost//ueditor/jsp/upload/image/20170317/1489733683889059469.png" title="1489733683889059469.png" alt="512x512.png" height="149" width="133"/>p>我做富文本编辑器之前,想多了,一开始想保存时,图片和文字分离
editor.getContentTxt()然后对内容进行正则
public class EditorImageUtil {
/**
* 从HTML源码中提取图片路径，最后以一个 String 类型的 List 返回，如果不包含任何图片，则返回一个 size=0 的List
* 需要注意的是，此方法只会提取以下格式的图片：.jpg|.bmp|.eps|.gif|.mif|.miff|.png|.tif|.tiff|.svg|.wmf|.jpe|.jpeg|.dib|.ico|.tga|.cut|.pic
* @param htmlCode HTML源码
* @return ![]()
标签 src 属性指向的图片地址的List集合
* @author Carl He
*/
public static List getImageSrc(String htmlCode) {
List imageSrcList = new ArrayList();
Pattern p = Pattern.compile("]*\\bsrc\\b\\s*=\\s*('|\")?([^'\"\n\r\f>]+(\\.jpg|\\.bmp|\\.eps|\\.gif|\\.mif|\\.miff|\\.png|\\.tif|\\.tiff|\\.svg|\\.wmf|\\.jpe|\\.jpeg|\\.dib|\\.ico|\\.tga|\\.cut|\\.pic)\\b)[^>]*>" , Pattern.CASE_INSENSITIVE);
Matcher m = p.matcher(htmlCode);
String quote = null;
String src = null;
while (m.find()) {
quote = m.group(1);
src = (quote == null || quote.trim().length() == 0) ? m.group(2).split("\\s+")[0] : m.group(2);
imageSrcList.add(src);
}
return imageSrcList;
}
}
/**
*把图片list转成字符串,方便存入数据库
*/
public static String listToString(List list, char separator){
StringBuilder sb = new StringBuilder();
for(int i=0; ireturn sb.toString().substring(0,sb.toString().length()-1);
} 5.问题分析
有点跑遍了,回到正轨
使用富文本就是想要有格式的,所以不需要那么复杂,直接保存html格式的就行
存入数据库没有出现问题,但是显示数据库内容时有个问题
editor.setContent("${content}")
因为content是HTML代码（含有大量的单引号和双引号），会造成代码混淆。所以一般把从库里读出来的HTML代码进行一下Unicode编码，然后把编码后的值赋给编辑器。
所以数据库取出数据时,进行Unicode编码
UnicodeFormatter.toString(megagameData.getContent());下面为Unicode编码代码
public class UnicodeFormatter {
private static Logger log = LoggerFactory.getLogger(UnicodeFormatter.class);
/** Unicode编码前缀 */
private static final String _UNICODE_PREFIX = "\\u";
/** 十六进制字符 */
private static final char[] _HEX_DIGITS = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f' };
/**
* 将一个byte转成十六进制格式的字符串
*
* @param b
* @return
*/
public static String byteToHex(byte b) {
char[] array = { _HEX_DIGITS[(b >> 4) & 0x0f], _HEX_DIGITS[b & 0x0f] };
return new String(array);
}
/**
* 将一个普通字符转为十六进制格式的字符串
*
* @param c
* @return
*/
public static String charToHex(char c) {
byte hi = (byte) (c >>> 8);
byte lo = (byte) (c & 0xff);
char[] array = { _HEX_DIGITS[(hi >> 4) & 0x0f], _HEX_DIGITS[hi & 0x0f], _HEX_DIGITS[(lo >> 4) & 0x0f],
_HEX_DIGITS[lo & 0x0f] };
return new String(array);
}
/**
* 将Unicode编码的字符串解析成普通格式字符串
*
* @param hexString
* @return
*/
public static String parseString(String hexString) {
StringBuilder sb = new StringBuilder();
char[] array = hexString.toCharArray();
if ((array.length % 6) != 0) {
log.error("String is not in hex format");
return hexString;
}
for (int i = 2; i < hexString.length(); i = i + 6) {
String s = hexString.substring(i, i + 4);
try {
char c = (char) Integer.parseInt(s, 16);
sb.append(c);
} catch (Exception e) {
log.error("Parse error, " + e);
return hexString;
}
}
return sb.toString();
}
/**
* 字符数组转为转成Unicode编码的字符串
*
* @param array
* @return
*/
public static String toString(char[] array) {
StringBuilder sb = new StringBuilder(array.length * 6);
char[] hexes = new char[4];
for (int i = 0; i < array.length; i++) {
sb.append(_UNICODE_PREFIX);
sb.append(_charToHex(array[i], hexes));
}
return sb.toString();
}
/**
* 将字符串转成Unicode编码的字符串
*
* @param s
* @return
*/
public static String toString(String s) {
if (s == null) {
return null;
}
StringBuilder sb = new StringBuilder(s.length() * 6);
char[] hexes = new char[4];
for (int i = 0; i < s.length(); i++) {
sb.append(_UNICODE_PREFIX);
sb.append(_charToHex(s.charAt(i), hexes));
}
return sb.toString();
}
// char在java中是2个字节。java采用unicode，2个字节（16位）来表示一个字符。
private static char[] _charToHex(char c, char[] hexes) {
byte hi = (byte) (c >>> 8);
byte lo = (byte) (c & 0xff);
hexes[0] = _HEX_DIGITS[(hi >> 4) & 0x0f];
hexes[1] = _HEX_DIGITS[hi & 0x0f];
hexes[2] = _HEX_DIGITS[(lo >> 4) & 0x0f];
hexes[3] = _HEX_DIGITS[lo & 0x0f];
return hexes;
}
public static void main(String[] args) {
String test = "abc123@汉字αβあにキКЖ÷⑥";
String u = UnicodeFormatter.toString(test);
System.out.println(u);
System.out.println(UnicodeFormatter.parseString(u));
System.out.println(UnicodeFormatter.toString("\n"));
}
}