zoukankan      html  css  js  c++  java
  • fckeditor 插件开发参考

    个人觉得这文章很适合初开发FCK插件的朋友~
    一:插件的目录结构
       插件目录的名称必须和插件的名称一样,而且目录里面必须包含一个fckplugin.js文件。可选包含一个lang目录用来实现界面的国际化。每一个文件定义一种语言,文件名不包含.js,用FCKConfig.Plugins.Add()注册。如果实现的插件命令没有界面,也可以不需要支持任何语言。
       比如:findreplace插件的目录结构如下:
      /editor/plugins/findreplace/fckplugin.js
      /editor/plugins/findreplace/lang/en.js
      /editor/plugins/findreplace/lang/zh.js
       在fckplugin.js文件中定义你的插件,同时也应该注册改命令,以及创建一个工具栏按钮。

       注册代码说明:


    //注册命令,RegisterCommand(命令名,命令)
    FCKCommands.RegisterCommand(
       'My_Find',
        new FCKDialogCommand(
            FCKLang['DlgMyFindTitle'],
            FCKLang['DlgMyFindTitle'],
            FCKConfig.PluginsPath + 'findreplace/find.html', 340, 170));

    FCKCommands.RegisterCommand('My_Replace',
        new FCKDialogCommand(
            FCKLang['DlgMyReplaceTitle'],
            FCKLang['DlgMyReplaceTitle'],
            FCKConfig.PluginsPath + 'findreplace/replace.html', 340, 200)) ;

    //创建工具栏按钮,现创建,再注册。
    var oFindItem = new FCKToolbarButton('My_Find', FCKLang['DlgMyFindTitle']);
    oFindItem.IconPath = FCKConfig.PluginsPath + 'findreplace/find.gif' ;
    FCKToolbarItems.RegisterItem( 'My_Find', oFindItem ) ;

    var oreplaceItem = new FCKToolbarButton( 'My_Replace', FCKLang['DlgMyReplaceTitle']);
    oreplaceItem.IconPath = FCKConfig.PluginsPath + 'findreplace/replace.gif';
    FCKToolbarItems.RegisterItem('My_Replace', oreplaceItem);



    二:安装插件:
    安装前把解压的包拷贝到editor/plugins目录下,然后按下列步骤进行:
    1、先确定按钮在工具栏的位置
    最好在定制的配置文件中,新写一个工具栏来包含新的插件。

    定制配置文件:

    FCKConfig.ToolbarSets['PluginTest'] = [
        ['Source'],
        ['Placeholder'],
        ['My_Find', 'My_Replace'],
        ['Table','-',
            'TableInsertRow', 'TableDeleteRows',
            'TableInsertColumn', 'TableDeleteColumns',
            'TableInsertCell', 'TableDeleteCells',
            'TableMergeCells', 'TableSplitCell'
        ],
        ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
    ] ;


    2:添加插件同样,可以直接在定制文件中添加插件。可以直接把插件放置到默认目录下,或者在FCKConfig.Plugins.Add方法里面的第三个参数指定插件所在的位置。
    //代码分析:

    FCKConfig.Plugins.Add( pluginName, availableLanguages, pathToPlugin )
            pluginName: 插件名称或者插件目录名称.
            availableLanguages: 逗号分割的可用语言列表.
            pathToPlugin: 绝对路径,指插件的所占目录,包括插件本身一层目录




    在默认位置添加插件

    FCKConfig.Plugins.Add( 'findreplace', 'en,it' ) ;


    在其他位置添加插件,在add方法传递插件的绝对路径。

    FCKConfig.PluginsPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + '_samples/_plugins/' ;
    var sOtherPluginPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + 'editor/plugins/' ;
    FCKConfig.Plugins.Add( 'placeholder', 'en,it', sOtherPluginPath ) ;
    FCKConfig.Plugins.Add( 'tablecommands', null, sOtherPluginPath ) ;




    //////////////////////////////////////////////////////////////////////////////////////////////
    按照下面的操作一次相信你会学到不少~
    一:基于对话框的插件:一步一步创建基于对话框的fck插件。

    以创建一个简单的超级链接为例。可以从已经存在的placeholder插件的目录作为基本的骨架。


    1. 命名插件名称为:"InsertLink". ,并建立同名的目录,并且在InsertLink目录下创建一个Lang的目录,lang目录下至少有一个文件en.js。该文件中至少要有按钮和对话框标题的国际化信息,比如:

    FCKLang.InsertLinkBtn = 'Insert/Edit Link' ; //按钮的标题
    FCKLang.InsertLinkDlgTitle = 'Link Properties' ; //对话框的标题


    2:图片,在InsertLink文件夹中添加图片文件,最好将图片文件命名为和插件名一样的名称。图片的大小要求是20*21,并且是透明的。
    3:javascript:
    添加fckplugin.js文件到InsertLink目录。
    注册相关命令:

    //注册命令的方法是FCKCommands.RegisterCommand(命令名称,对话框命令)
    //创建对话框命令的格式:new FCKDialogCommand( 命令名称, 对话框标题,url路径, 宽度,高度)

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

    // 创建工具栏按钮 new FCKToolbarButton( 按钮名称, 按钮标题 ) ;
    var oInsertLinkItem = new FCKToolbarButton( 'InsertLink', FCKLang.InsertLinkBtn ) ;
    oInsertLinkItem.IconPath = FCKPlugins.Items['InsertLink'].Path + 'InsertLink.gif' ;
    FCKToolbarItems.RegisterItem( 'InsertLink', oInsertLinkItem ) ;

    //创建用于所有InsertLink操作的对象
    var FCKInsertLink = new Object() ;

    //在当前的选择上插入一个超级链接
    // 这个添加的方法将在弹出窗口点击ok按钮时被调用。
    // 该方法将会接收从对话框中传来的值。

    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 ) ;
    }

    //从编辑器中得到当前的被选择的元素,有以下两种方法:

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

    //2. 由于有内部文本的元素
    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

    }

    //点击ok按钮发生的操作
    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 link<br>
    <input id="txtHref" type="text"><br>
    Type the caption for the link<br>
    <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']  
  • 相关阅读:
    android手机rootROM下载地址
    mysql alter 语句用法,添加、修改、删除字段等
    java比较两个日期大小
    eclipse设置全局编码为UTF-8的方法
    Spring MVC 异步处理请求,提高程序性能
    ELK(ElasticSearch, Logstash, Kibana)搭建实时日志分析平台
    maven之发布项目到nexus【clean deploy命令】
    nexus-3本地下载jar的settipng.xml配置
    windows开启3306端口并用可视化工具访问远程mysql(授权访问)
    mysql 列转行,合并字段
  • 原文地址:https://www.cnblogs.com/dsliang/p/1357594.html
Copyright © 2011-2022 走看看