FCKeditor插件开发的一些知识

1.在fckplugin.js中,可以直接引用FCK对象进行各种操作。

2.弹窗型的插件,使用如下注册方式:

FCKCommands.RegisterCommand('PluginName',new FCKDialogCommand(parameters...));

3.选区型插件(Selection Based)似乎没有可以直接使用的Command类型,so,自己动手写一个也挺简单:

var FCKPLinkCommand = function(){}

FCKPLinkCommand.prototype = {

Name: 'PLink',

Execute:function(parameters...){},

GetState:function(){}

};

再传入注册函数即可:

FCKCommands.RegisterCommand('PLink',new FCKPLinkCommand(parameters...));

4.FCK中的函数都是大写开头的,JavaScript内致函数,都是小写开头的。例如Selection是FCK提供的,selection是JavaScript提供的。

5.工具栏图标的大小是16x16相素,如果图标大了,火狐会自动调节,IE嘛,被截掉一段。

6.选区操作区分浏览器。

IE:FCK.EditorDocument.selection.createRange().text;

火狐:FCK.EditorWindow.getSelection();

更多关于选区操作的函数参考这里:http://hi.baidu.com/17docnet/blog/item/a2ea22f4eede7422bc310988.html

摘录如下:

FCKeditor Selection 对象使用举例:
// The selection object
FCKeditorAPI.GetInstance("FCKeditor").Selection
// properties
FCKeditorAPI.GetInstance("FCKeditor").Selection.GetType();
FCKeditorAPI.GetInstance("FCKeditor").Selection.GetSelectedElement();
FCKeditorAPI.GetInstance("FCKeditor").Selection.GetParentElement(); // Doesn't seem to be working in Fx when the selection is only one character
// methods
// select node, e.g. select the parent node
FCKeditorAPI.GetInstance("FCKeditor").Selection.SelectNode(FCKeditorAPI.GetInstance("FCKeditor").Selection.GetParentElement());
// Move cursor position before (toStart = true, default) or after (toStart = false) the selection
FCKeditorAPI.GetInstance("FCKeditor").Selection.Collapse(toStart);
// Check if the selection has a specified ancestor node, returns true or false. The "nodeTagName" parameter must be Upper Case.
alert(FCKeditorAPI.GetInstance("FCKeditor").Selection.HasAncestorNode(nodeTagName));
// Move selection to ancestor node. The "nodeTagName" parameter must be Upper Case.
FCKeditorAPI.GetInstance("FCKeditor").Selection.MoveToAncestorNode(nodeTagName);
// Delete selection
FCKeditorAPI.GetInstance("FCKeditor").Selection.Delete();
// so to get the element that is selected, first check the type of the selection
// Doesn't seem to be working in Fx when the selection is only one character - This is due to some bug in the 'GetParentElement' method
if(FCKeditorAPI.GetInstance("FCKeditor").Selection.GetType() == 'Control')
{
alert(FCKeditorAPI.GetInstance("FCKeditor").Selection.GetSelectedElement());
}
else if(FCKeditorAPI.GetInstance("FCKeditor").Selection.GetType() == 'Text')
{
alert(FCKeditorAPI.GetInstance("FCKeditor").Selection.GetParentElement());
}
// Fetching the actual content of the selection can't be done through the 'Selection' Object...
if (document.all)
{
alert(FCKeditorAPI.GetInstance("FCKeditor").EditorDocument.selection.createRange().text);
}
else
{
alert(oSel = FCKeditorAPI.GetInstance("FCKeditor").EditorWindow.getSelection());
}

API参考:
GetParentBlock = function(){var A=this.GetParentElement();while (A){if (FCKListsLib.BlockBoundaries[A.nodeName.toLowerCase()]) break;A=A.parentNode;};return A;}
ApplyStyle = function(A){FCKStyles.ApplyStyle(new FCKStyle(A));}
GetType = function(){try{var A=FCK.EditorDocument.selection.type;if (A=='Control'||A=='Text') return A;if (FCK.EditorDocument.selection.createRange().parentElement) return 'Text';}catch(e){};return 'None';}
GetSelectedElement = function(){if (this.GetType()=='Control'){var A=FCK.EditorDocument.selection.createRange();if (A&&A.item) return FCK.EditorDocument.selection.createRange().item(0);};return null;}
GetParentElement = function(){switch (this.GetType()){case 'Control':var A=FCKSelection.GetSelectedElement();return A?A.parentElement:null;case 'None':return null;default:return FCK.EditorDocument.selection.createRange().parentElement();}}
GetBoundaryParentElement = function(A){switch (this.GetType()){case 'Control':var B=FCKSelection.GetSelectedElement();return B?B.parentElement:null;case 'None':return null;default:var C=FCK.EditorDocument;var D=C.selection.createRange();D.collapse(A!==false);var B=D.parentElement();return FCKTools.GetElementDocument(B)==C?B:null;}}
SelectNode = function(A){FCK.Focus();FCK.EditorDocument.selection.empty();var B;try{B=FCK.EditorDocument.body.createControlRange();B.addElement(A);}catch(e){B=FCK.EditorDocument.body.createTextRange();B.moveToElementText(A);};B.select();}
Collapse = function(A){FCK.Focus();if (this.GetType()=='Text'){var B=FCK.EditorDocument.selection.createRange();B.collapse(A==null||A===true);B.select();}}
HasAncestorNode = function(A){var B;if (FCK.EditorDocument.selection.type=="Control"){B=this.GetSelectedElement();}else{var C=FCK.EditorDocument.selection.createRange();B=C.parentElement();};while (B){if (B.tagName==A) return true;B=B.parentNode;};return false;}
MoveToAncestorNode = function(A){var B,oRange;if (!FCK.EditorDocument) return null;if (FCK.EditorDocument.selection.type=="Control"){oRange=FCK.EditorDocument.selection.createRange();for (i=0;i
Delete = function(){var A=FCK.EditorDocument.selection;if (A.type.toLowerCase()!="none"){A.clear();};return A;}

7.editor/_source/commandclass/fck_othercommands.js这里定义了FCKDialogCommand。

editor/_source/internal/fckcommands.js这里定义了大部分命名的Command,例如Source,Preview,Save等等在commandclass文件夹下找不到的command.

autogrow:让FCKeditor高度随内容增加的插件

这个插件在默认情况下可能运行不正常,必须做一点修改才可以。

打开插件所在文件:/editor/plugins/autogrow/fckplugin.js

找到第65行:

window.frameElement.height = iMainFrameSize ;

将其修改为:

if (window.frameElement.style.height) {

            window.frameElement.style.height = iMainFrameSize;

        }
        else {
            window.frameElement.height = iMainFrameSize;

        }

这样就可以兼容IE和火狐浏览器了。

启用插件:

打开文件:/fckeditor/fckconfig.js

启用这两行:

FCKConfig.Plugins.Add( 'autogrow' ) ;
FCKConfig.AutoGrowMax = 600 ;

AutoGrowMax是限制最高高度。可以根据需要自行设置。

参考:http://cksource.com/forums/viewtopic.php?f=6&t=10214&p=30094

FCKeditor退休了,HTML中调用FCKeditor的方式

取而代之的是其弟弟 CKeditor 。在考虑要不要把项目中的FCK换掉。

在换掉之前,先备忘一下HTML方式调用FCKeditor的方法。

文档:FCKeditor使用指南.pdf

设置FCKeditor回车换行方式

在FCKeditor中按回车,是换行还是另起一段呢?

可以设置的。

FCKeditor Enter(回车键)换行时间距过大。按住Shift+Enter换行时(间距会小)
也就是说它默认直接敲回车是一个<p>键,而按Shift+回车则是<br />键。
那一般人的习惯都是直接就敲回车的了,查看了下它的配置文件发现是可以解决的。

还有二种方法

一,修改fckconfig.js
FCKConfig.EnterMode = 'p' ; // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br

将ShiftEnterMode与EnterMode的值换一下,EnterMode=br SHIFTENTERMODE=P
就可以解决了。

二,在fckconfig.js文件中查找UseBROnCarriageReturn。把FCKConfig.UseBROnCarriageReturn = false ; 改为FCKConfig.UseBROnCarriageReturn = true ;
不过这方式可能只有IE支持,不建议使用。

我也很想告诉百度管理员,让他也来看看这篇文章,
百度空间的编辑器正是fckeditor,也是如些,真的很不方便。

公告栏

  • 姓名:林剑锋(不见不散)
  • 来自:中国-广州
  • 简介:潮汕人,出生于广东揭西。醉心于Web开发8年,挑战了一年整体策划和网站运营。目前就职于平成混媒IT部。
  • Email/QQ:admin@ljf.cn

QQ群:设计学院 68075618,网站设计师 9908776

统计

文章:335篇
评论:163条 (2条Spam)
相册:1个 (120张图片)
主题:Nagrand新主题

www.ljf.cn网站PR查询