javaweb專案中引入CKeditor元件
阿新 • • 發佈:2018-12-21
CKeditor的安裝與使用 for jsp:
FCKeditor是一個專門使用在網頁上屬於開放原始碼的所見即所得文字編輯器。
一、下載CKEditor
開啟連線往下拉,可以找到最新的版本。 下載zip包,並解壓。
二、安裝CKEditor
解壓ckeditor_4.11.1_standard.zip,得到ckeditor目錄,將ckeditor整個目錄拷貝到WebRoot下。
三、編輯ckeditorDemo.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>ckeditor 的使用</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <!-- 引入ckeditor元件 --> <script src="${pageContext.request.contextPath }/ckeditor/ckeditor.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath }/ckeditor/samples/css/sample.css"> </head> <body> <form name="xiaohua" action="${pageContext.request.contextPath }/index" method="post"> 評論區:<textArea class="ckeditor" rows="20" cols="30" name="content"></textArea> <br> </form> </body> </html>
需要注意三個地方:
四、開啟瀏覽器檢視效果
至此,就可以使用該元件,帶來的非凡體驗了。