一,下載地址:http://ueditor.baidu.com/website/download.html 1)根據需要下載相應版本 例 Java:選擇jsp+utf-8; 二,放置在項目中 1)解壓下載文件,並重命名為editor; 2)複製文件放置在項目webapp目錄下; 3)把editor目 ...
一,下載地址:http://ueditor.baidu.com/website/download.html
1)根據需要下載相應版本
例 Java:選擇jsp+utf-8;
二,放置在項目中
1)解壓下載文件,並重命名為editor;
2)複製文件放置在項目webapp目錄下;
3)把editor目錄下的js文件(3個)剪切放在你的js文件目錄下;
4)複製editor內全部文件到js目錄一份(不複製可以使用,但頁面會報404錯誤,估計是在初始化時需要訪問其他文件)
三,配置靜態資源映射
1)在Springmvc.xml配置文件中配置相應屬性(前提是已經在web.xml中配置了相應配置);
web.xml配置:
<servlet>
<servlet-name>portal</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!-- contextConfigLocation不是必須的, 如果不配置contextConfigLocation,
springmvc的配置文件預設在:WEB-INF/servlet的name+"-servlet.xml" -->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring/springmvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>portal</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
Springmvc配置:
<mvc:resources mapping="/umeditor/**" location="/umeditor/" />
<mvc:resources mapping="/js/**" location="/js/" />
四,頁面配置
1)在head引入文件:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="umeditor/third-party/jquery.min.js"></script>
<script type="text/javascript" src="umeditor/third-party/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="js/umeditor.min.js"></script>
<script type="text/javascript" src="umeditor/lang/zh-cn/zh-cn.js"></script>
2)畫出div放置編輯器:
<!-- 文本編輯器位置 -->
<div id="myEditor" style="width:1000px;height:240px;">
<p>提示內容</p>
</div>
3)實例化編輯器:
<script type="text/javascript">
//實例化編輯器
var um = UM.getEditor('myEditor');
</script>
4)常用方法(其他見官網demo):
<input type="button" value="獲取內容" onclick="getAllHtml()">
<input type="button" value="填充內容" onclick="setAllHtml()">
<script type="text/javascript">
//獲取內容
function getAllHtml() {
alert(UM.getEditor('myEditor').getContent())
}
//填充內容
function setAllHtml() {
alert(UM.getEditor('myEditor').setContent())
}
</script>
五,效果圖