• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    fckeditor 插件实例 制作步骤
    以创建一个简单的超级链接为例。可以从已经存在的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 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扩展插件:自动排版功能autoformat插件实现方法详解
    • FCKeditor 插件开发 示例(详细版本)
    • ckeditor自定义插件使用方法详解
    • CKEditor 附插入代码的插件
    • 添加FCKeditor插件需要注意的地方
    • ckeditor插件开发简单实例
    • autogrow 让FCKeditor高度随内容增加的插件
    • CKEditor中加入syntaxhighlighter代码高亮插件
    • FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合
    • ckeditor一键排版功能实现方法分析
    上一篇:FCKeditor 插件开发 示例(详细版本)
    下一篇:fckeditor 插件开发参考文档
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    fckeditor 插件实例 制作步骤 fckeditor,插件,实例,制作,