CKEditor入門篇----建立編輯器的方式(1)
阿新 • • 發佈：2019-01-29
配置指令碼建立編輯器
步驟：
如上圖所示，有三種類型的編輯器可以選擇
a. Basic package 基礎版
b. Standard package 標準版
c. Full package 完整版
（2）使用eclipse或MyEclipse建立Web專案，加入CKEditor專案
下面以CKEditor的基礎版為例：
解壓官方網站下載的CKEditor，會有一個ckeditor資料夾，將其複製到WebRoot目錄中，
並建立2個JSP頁面：index.jsp（演示CKEditor）和sample_posteddata.jsp(接收資料)
如下圖：
index.jsp頁面程式碼：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 1.匯入核心JS --> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> <title>Insert title here</title> </head> <body> <form action="sample_posteddata.jsp" method="post"> <p> <label for="editor1">Editor1:</label> </p> <!--2.建立一個文字哉 --> <textarea rows="10" cols="80" id="editor1" name="editor1"></textarea> <!--3.將上面建立的文字域替換成CKEditor編輯器(注:引數是按name去查詢，找不到再找ID標識) --> <script type="text/javascript"> CKEDITOR.replace("editor1"); </script> <p> <input type="submit" value="submit"/> </p> </form> </body> </html>
sample_posteddata.jsp頁面程式碼：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- 處理下中文編碼 --> <%request.setCharacterEncoding("UTF-8"); %> The Editor Value is : <p> <%=request.getParameter("editor1") %> </p> </body> </html>
CKEditor的基本原理：通過指令碼動態生成HTML程式碼捆綁到文字域中，如下面圖解：
提交結果：
現在去掉index.jsp中的編輯器捆綁程式碼
<script type="text/javascript">
//CKEDITOR.replace("editor1");
</script>
重新重新整理瀏覽器中的index.jsp
PS：