FCKeditor在線文本編輯器初級應用

時間 2019-11-11

標籤 fckeditor 在線文本編輯器初級應用欄目 JavaScript 简体版

原文原文鏈接

首先從FCKeditor的官網( http://www.fckeditor.net/)下載該編輯器，我下載的版本是FCKeditor_2.6.6，而後新建一JavaWeb項目，命名爲5.3。而後把解壓後的fckeditor文件夾複製到項目的WebContent目錄下。至此，完成對FCKeditor在線文本編輯器環境的配置。javascript

1.用JavaScript語言直接調用FCKeditor.新建一名爲test1的jsp文件，代碼以下：html

<%@ 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>
<script type="text/javascript" src="fckeditor/fckeditor.js">
</script>
</head>
<body>
     <script type="text/javascript">
         var editor=new FCKeditor('editor');        //新建一個名爲editor的FCKeditor對象
         editor.BasePath="/5.3/fckeditor/"; //設置在線文本編程器的基準路徑,也就是fckeditro.js的目錄
         editor.Create();                   //經過Create()方法來建立和輸出一個文本編輯器
     </script>
</body>
</html>

重啓Tomcat服務器，在IE窗口中查看效果，以下：java

2.標籤<textarea>調用FCKeditor，代碼以下：編程

<%@ 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>
     <script type="text/javascript" src="fckeditor/fckeditor.js">
     </script>
     <script type="text/javascript">
        window.onload=function(){
        var editor=new FCKeditor('textarea'); //建立一個名爲editor的FCKeditor對象，而且實例名必須和文本域名一致
        editor.BasePath="fckeditor/";         //設置在線文本編輯器的基準路徑，此處設置的是相對路徑   
        editor.ReplaceTextarea();             //經過ReplaceTextarea()方法替代<textarea>元素 
        }                                      
     </script>
</head>
<body>      
       <textarea name="textarea">FCKeditor</textarea>   
</body>       
</html>

3.利用JSP標籤調用FCKeditor在線文本編輯器api

1)首先把fckeditor-java-2.6\lib目錄下的3個jar文件：commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar、slf4j-api-1.5.8.jar和fckeditor-java-2.6目錄下的fckeditor-java-core-2.6.jar，引入Java Web項目。再把fckeditor-java-demo-2.6.war文件解壓，從其目錄fckeditor-java-demo-2.6.war\WEB-INF\lib中找到slf4j-simple-1.5.8.jar，也引用Java Web項目。服務器

2)在JSP頁面中自定義標籤來對FCKeditor在線文本編輯器進行調用。代碼以下：jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<!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>FCKeditor</title>
    <script type="text/javascript" src="fckeditor/fckeditor.js"> 
     </script>
  </head>
<body>      
      <FCK:editor  instanceName="editor"  basePath="/fckeditor"  value="測試代碼"></FCK:editor>
</body>       
</html>