ssm項目中ueditor富文本編輯器的使用

一、下載 https://ueditor.baidu.com/website/index.html

　　將ueditor放到項目中合適的位置

　　

二 、 配置文件上傳路徑

 　　在utf8-jsp/jsp/config.json文件中更改文件長傳路徑

　　

三 、自定義工具類

　　在utf8-jsp/ueditor.config.js中自定義工具類

　　

 

四、 前端使用

// 引用
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/BG/utf8-jsp/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/BG/utf8-jsp/ueditor.all.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/BG/utf8-jsp/lang/zh-cn/zh-cn.js"></script>

// 使用
<div class="layui-form-item">
				    <label for="L_answer" class="layui-form-label">內容</label>
				<div class="layui-input-inline" style="width:340px;">
					<!-- <textarea name="answer" id="L_answer" class="layui-textarea"></textarea> -->
					<script id="hdxy" type="text/plain"style="width:800px;height:210px;">${notice.content}</script>
				</div>
			</div>

// 初始化
<!--富文本編輯器  -->
	<script type="text/javascript">
		//實例化編輯器
		//建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
		var ue = UE.getEditor('hdxy');
		/* ue.addListener("ready", function () {
	      　　// editor准備好之后才可以使用
	    	ue.setContent("${faq.answer}", false);
	    }); */
	</script>    

 

五、后台使用

try {
			notice.setContent(editorValue); // 獲取富文本編輯器中的所有內容
			
			Matcher m = Pattern.compile("<a[^>]*>([^<]*)</a>").matcher(editorValue);
			while (m.find()) {
				// System.out.println(m.group(1));  // 獲取a標簽內的內容
				String filepath = m.group(0);	// 獲取整個a標簽
				notice.setFilepath(filepath);
			}
			noticeService.updateNotice(notice);
			response.getWriter().println(1);
		} catch (Exception e) {
			response.getWriter().println(0);
		}