FCKeditor
簡介
FCKeditor是一種通用的文本編輯器插件。
使用FCKeditor插件準(zhǔn)備工作
第一步：導(dǎo)入FCKeditor插件文件
第二步：加入的JAR包，如下圖所示?
在頁面中使用FCKeditor插件
做好以上準(zhǔn)備工作后，我們就要分別在HTML文件和JSP文件中調(diào)用FCKeditor插件，把文本編輯器使用在我們的項目中。
如何在HTML文件中使用FCKeditor
在HTML文件中插入FCKeditor插件有2種方式：
1．在<head></head>部分中導(dǎo)入fckeditor.js文件，在<body></body>部分使用<script></script>標(biāo)簽
<head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>//導(dǎo)入fckeditor.js文件
</head>
<body>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1'); //新建FCKeditor對象 名稱FCKeditor1
oFCKeditor.BasePath = "/fckeditor/fckeditor/" ; //設(shè)置基準(zhǔn)路徑
oFCKeditor.Value = "initial value";
oFCKeditor.Toolbarset = "Default";? //引用工具集類型
oFCKeditor.Create(); //調(diào)用Create方法 創(chuàng)建并且輸出一個文本框輸出
</script>
</body>
2．在<body></body>部分編寫<textarea></textarea>標(biāo)簽，標(biāo)簽中的name表示調(diào)用FCKeditor對象名稱，在<head></head>部分中 首先導(dǎo)入fckeditor.js文件，然后編寫Fckedirot對象。
<head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>?
<script type="text/javascript">
window.onload = function(){? //網(wǎng)頁文檔加載完后 執(zhí)行下列代碼
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ; //創(chuàng)建FCKeditor對象
oFCKeditor.BasePath = "/fckeditor/fckeditor/" ;? //fckeditor文件目錄
oFCKeditor.Width = "80%"; //設(shè)置文本編輯器長度
oFCKeditor.Height = "50%"; //設(shè)置文本編輯器寬度
oFCKeditor.Value = "this is FCKeditor value"; //文本編輯器初始內(nèi)容
oFCKeditor.ToolbarSet = "Default"; //工具集名稱
oFCKeditor.ReplaceTextarea();
? </script>
</head>
<body>
?? <textarea rows="4" cols="60" name="MyTextarea">this is myFCKeditor</textarea><!—name 要調(diào)用FCKeditor對象名稱 -->
</body>
如何在JSP文件中使用FCKeditor
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>? //在JSP文件中加入FCKeditor標(biāo)簽庫
<body>
<FCK:editor instanceName="EditorDefault" toolbarSet="Default" value="this is myFckeditor"></FCK:editor> <!-- toolbarSet可選簡單版本Basic -->
</body>
自定義
//自定義表情
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/mygimss/' ; //表情圖片所在的路徑是一個文件夾
FCKConfig.SmileyImages = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif'] ; //配置要顯示上面文件夾里的哪些圖片
FCKConfig.SmileyColumns = 5 ; //每行顯示幾個圖片
FCKConfig.SmileyWindowWidth = 640 ; //顯示表情圖片的寬度
FCKConfig.SmileyWindowHeight = 320 ; //顯示表情圖片的高度
通過自定義表情圖片 我們會發(fā)現(xiàn) 表情圖片框的大小總是不合適 而我們自己定義的寬高貌似也不起作用，下面我們介紹如何使用自定義表情圖片框大小。如下圖所示：
我們根據(jù)頁面屬性找到路徑fckeditor文件夾下editor文件家中dialog文件夾下的fck_smiley.html文件，fck_smiley.html就是管理表情圖片樣式的文件，但我們?nèi)绾涡薷牧司涂梢宰屛覀兂研娜缫饬四兀磕敲次覀兙蛠斫鉀Q第一個問題，無法顯示我們自定義的寬高問題：
window.onload = function ()
{
// First of all, translate the dialog box texts
oEditor.FCKLanguageManager.TranslatePage(document) ;
//dialog.SetAutoSize( true ) ; //默認(rèn)會以頁面大小自動顯示表情圖片框大小
}
從頁面上我們終于可以顯示自定義表情圖片的寬高了，而我們發(fā)現(xiàn)我們把表情圖片框的高度調(diào)到我們滿意的尺寸，而里面的圖片又不滿意了，有些圖片無法完全顯示了，我們這是就想到了滾動條：
<body style="overflow: auto"> <!-- style="overflow: auto" auto是在必要的情況下顯示滾動條 -->
? ……….
? ………..
</body>
自此，我們的自定義表情圖片算是大功告成了！鼓鼓掌，呵呵~~~
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
