主頁 > 知識庫 > fckeditor 插件實(shí)例制作步驟

fckeditor 插件實(shí)例制作步驟

以創(chuàng)建一個(gè)簡單的超級鏈接為例?？梢詮囊呀?jīng)存在的placeholder插件的目錄作為基本的骨架。

1. 命名插件名稱為："InsertLink". ，并建立同名的目錄，并且在InsertLink目錄下創(chuàng)建一個(gè)Lang的目錄，lang目錄下至少有一個(gè)文件en.js。該文件中至少要有按鈕和對話框標(biāo)題的國際化信息，比如：
FCKLang.InsertLinkBtn = 'Insert/Edit Link' ; //按鈕的標(biāo)題
FCKLang.InsertLinkDlgTitle = 'Link Properties' ; //對話框的標(biāo)題
2：圖片，在InsertLink文件夾中添加圖片文件,最好將圖片文件命名為和插件名一樣的名稱。圖片的大小要求是20*21，并且是透明的。
3：javascript：
添加fckplugin.js文件到InsertLink目錄。
注冊相關(guān)命令：
注冊命令的方法是FCKCommands.RegisterCommand（命令名稱，對話框命令）
創(chuàng)建對話框命令的格式：new FCKDialogCommand( 命令名稱, 對話框標(biāo)題,url路徑, 寬度,高度)

FCKCommands.RegisterCommand( 'InsertLink', new FCKDialogCommand( 'InsertLink', FCKLang.InsertLinkDlgTitle,
FCKPlugins.Items['InsertLink'].Path + 'fck_InsertLink.html', 340, 200 ) ) ;

// 創(chuàng)建工具欄按鈕 new FCKToolbarButton( 按鈕名稱, 按鈕標(biāo)題 ) ;
var oInsertLinkItem = new FCKToolbarButton( 'InsertLink', FCKLang.InsertLinkBtn ) ;
oInsertLinkItem.IconPath = FCKPlugins.Items['InsertLink'].Path + 'InsertLink.gif' ;
FCKToolbarItems.RegisterItem( 'InsertLink', oInsertLinkItem ) ;

//創(chuàng)建用于所有InsertLink操作的對象
var FCKInsertLink = new Object() ;

//在當(dāng)前的選擇上插入一個(gè)超級鏈接
// 這個(gè)添加的方法將在彈出窗口點(diǎn)擊ok按鈕時(shí)被調(diào)用。
// 該方法將會(huì)接收從對話框中傳來的值。

FCKInsertLink.Add = function( linkname, caption )
{
if(linkname.substr(0,4) != "http" linkname.substr(0,4) != "HTTP")
linkname = "http://"+linkname ;
FCK.InsertHtml("a href='"+linkname+"'>"+caption+"/a>") ;
}

4：html
在InsertLink目錄下添加請求的文件。
請求文件的模板代碼：
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
html>
head>
title>Link Properties/title>
meta http-equiv="Content-Type" content="text/html; charset=utf-8">
meta content="noindex, nofollow" name="robots">
script language="javascript">

var oEditor = window.parent.InnerDialogLoaded() ;
var FCK = oEditor.FCK ;
var FCKLang = oEditor.FCKLang ;
var FCKInsertLink = oEditor.FCKInsertLink ;

window.onload = function ()
{
LoadSelected() ; //see function below
window.parent.SetOkButton( true ) ;
}

//從編輯器中得到當(dāng)前的被選擇的元素，有以下兩種方法：

//1. 可用于image等元素的選擇。
//var eSelected = oEditor.FCKSelection.GetSelectedElement() ;

//2. 由于有內(nèi)部文本的元素
var eSelected = FCK.Selection.MoveToAncestorNode( 'A' )
if ( eSelected )
FCK.Selection.MoveToNode( eSelected ) ;

//如果超級練級被選擇，那么顯示超級鏈接的屬性
function LoadSelected()
{
if ( !eSelected )
return ;

txtHref.value = eSelected.href ;
txtCaption.value = eSelected.innerText ;

//適合于第一種選擇操作的代碼：
// if ( eSelected.tagName == 'IMG' ) {
// -- code for setting dialog values -- }
// else
// eSelected == null ; //this will replace the current selection if not the right type

}

//點(diǎn)擊ok按鈕發(fā)生的操作
function Ok()
{
if ( document.getElementById('txtHref').value.length > 0 )
FCKInsertLink.Add( txtHref.value, txtCaption.value ) ;

return true ;
}
/script>
/head>

body scroll="no" style="OVERFLOW: hidden">
table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
tr>
td>
table cellSpacing="0" cellPadding="0" align="center" border="0">
tr>
td>
Type the URL for the linkbr>
input id="txtHref" type="text">br>
Type the caption for the linkbr>
input id="txtCaption" type="text">
/td>
/tr>
/table>
/td>
/tr>
/table>
/body>
/html>

!-- End Code -->

5：編輯fckconfig.js文件，并加入下列代碼，注冊插件。
FCKConfig.Plugins.Add( 'InsertLink', 'en' ) ;
//在工具欄集合中定義命令名稱。
FCKConfig.ToolbarSets["Default"] = [ , ['InsertLink']

您可能感興趣的文章:

CKEditor擴(kuò)展插件：自動(dòng)排版功能autoformat插件實(shí)現(xiàn)方法詳解
FCKeditor 插件開發(fā) 示例（詳細(xì)版本）
ckeditor自定義插件使用方法詳解
CKEditor 附插入代碼的插件
添加FCKeditor插件需要注意的地方
ckeditor插件開發(fā)簡單實(shí)例
autogrow 讓FCKeditor高度隨內(nèi)容增加的插件
CKEditor中加入syntaxhighlighter代碼高亮插件
FCKeditor 和 SyntaxHighlighter 代碼高亮插件的整合
ckeditor一鍵排版功能實(shí)現(xiàn)方法分析

標(biāo)簽：樂山上海河南新疆長治滄州紅河沈陽

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《fckeditor 插件實(shí)例制作步驟》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

佳木斯湛栽影视文化发展公司

fckeditor 插件實(shí)例 制作步驟

QQ咨詢

電話咨詢

fckeditor 插件實(shí)例制作步驟