ueditor编辑器的使用
1.ueditor編輯器的介紹
UEditor是由百度web前端研發(fā)部開發(fā)的所見即所得的開源富文本編輯器，具有輕量、可定制、用戶體驗(yàn)優(yōu)秀等特點(diǎn)。基于MIT開源協(xié)議，所有源代碼在協(xié)議允許范圍內(nèi)可自由修改和使用。百度UEditor的推出，可以幫助不少網(wǎng)站開發(fā)者在開發(fā)富文本編輯器所遇到的難題，節(jié)約開發(fā)者因開發(fā)富文本編輯器所需要的大量時(shí)間，有效降低了企業(yè)的開發(fā)成本。
下面我將在IDEA中用Java演示ueditor編輯器的引入：
2.ueditor編輯器的簡(jiǎn)單使用
1.下載編輯器
可以直接去ueditor的官網(wǎng)下載，也可以去我的阿里網(wǎng)盤下載，鏈接如下所示：
ueditor編輯器下載
2.創(chuàng)建Maven空項(xiàng)目
打開IDEA，創(chuàng)建Maven空項(xiàng)目，并添加web框架，然后將前一步下載的ueditor編輯器解壓后導(dǎo)入web目錄下，結(jié)果如下所示：
3.導(dǎo)入pom.xml依賴
由于需要使用到SpringMVC框架，因此這里面包含servlet，jsp,依賴，當(dāng)然最重要的還是ueditor依賴
<dependencies><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version></dependency><dependency><groupId>javax.servlet.jsp.jstl</groupId><artifactId>jstl-api</artifactId><version>1.2</version></dependency><dependency><groupId>javax.servlet.jsp</groupId><artifactId>jsp-api</artifactId><version>2.2</version></dependency><dependency><groupId>com.gitee.qdbp.thirdparty</groupId><artifactId>ueditor</artifactId><version>1.4.3.3</version></dependency></dependencies>4.引入配置文件和編輯器源碼文件
在index.jsp里面引入配置文件和編輯器源碼文件。
<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>5.加載編輯器的容器
在index.jsp中加載編輯器的容器,即確定ueditor富文本編輯器的位置，在index.jsp中引入以下代碼：
<!-- 加載編輯器的容器 --><script id="container" name="content" type="text/plain">這里寫你的初始化內(nèi)容</script>6.實(shí)例化編輯器
最后同樣在index.jsp中通過(guò)容器的id實(shí)例化編輯器，同時(shí)設(shè)置寬度為800，高度為200，這里不用加單位，具體如下：
<!-- 實(shí)例化編輯器 --><script type="text/javascript">var ue = UE.getEditor('container',{//設(shè)置寬度initialFrameWidth:800,//設(shè)置高度initialFrameHeight:200});</script>7.展示index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><title>ueditor</title><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></head><body><!-- 加載編輯器的容器 --><script id="container" name="content" type="text/plain">這里寫你的初始化內(nèi)容</script><!-- 實(shí)例化編輯器 --><script type="text/javascript">var ue = UE.getEditor('container',{//設(shè)置寬度initialFrameWidth:800,//設(shè)置高度initialFrameHeight:200});</script></body> </html>8.運(yùn)行效果展示
如此就可以正確的引入ueditor。
9.排除錯(cuò)誤
注意，使用ueditor富文本編輯器一定要正確的引入所有資源，缺一不可，一定不能只引入一部分，否則就會(huì)導(dǎo)致富文本編輯器顯示不出來(lái)。
總結(jié)
以上是生活随笔為你收集整理的ueditor编辑器的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Linux下socket编程的简单实例
- 下一篇： oozie中管理datax脚本方法实践