FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。

  FCKeditor 相容于绝大部分的网页浏览器,像是 : Internet Explorer 5.5+ (Windows)、Mozilla Firefox 1.0+、Mozilla 1.3+ 、Netscape 7+以及Opera浏览器。
新版FCKEditor已改名为CKEditor,此文仅供仍使用FCKEditor的同学参考。

获取实例

Jquery
1
var oEditor= FCKeditorAPI.GetInstance('fckMobile'); //其中fckMobile为此控件id

属性和方法

Jquery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Description = string
EditMode = Integer
Name = string
Status = Integer
function AttachToOnSelectionChange(functionPointer)
function CleanAndPaste(html)
function createElement_x(tag)
function CreateLink(url)
function ExecOnSelectionChange() //Fires OnSelectionChange event in event manager
function ExecOnSelectionChangeTimer()
function ExecuteNamedCommand(commandName, commandParameter)
function ExecuteRedirectedNamedCommand(commandName, commandParameter)
function Focus()
function GetHTML(format) // doesnt work. Use GetXHTML instead.
function GetNamedCommandState(commandName)
function GetNamedCommandValue(commandName)
function GetXHTML(format)
function InitializeBehaviors()
function InsertElement(element)
function InsertElementAndGetIt(e)
function InsertHtml(html)
function IsDirty();
function MakeEditable()
function OnDoubleClick(element)
function Paste()
function PasteAsPlainText()
function PasteFromWord()
function Preview()
function RegisterDoubleClickHandler(handlerFunction, tag)
function ResetIsDirty();
function SetHTML(html, forceWYSIWYG)
function SetStatus()
function ShowContextMenu(x, y)
function SwitchEditMode()
function UpdateLinkedField()

API

Jquery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
function abc() {
var checkContent = FCKeditorAPI.GetInstance("editor"); //获取实例
alert(checkContent.GetXHTML()); //获取当前内容
var newelement = document.createElement("a");
newelement.href = "#";
newelement.innerHTML = "df";
checkContent.InsertElement(newelement); //前部添加元素(无返回值)
var a = checkContent.InsertElementAndGetIt(newelement); //前部添加元素(返回元素)
checkContent.InsertHtml("") //添加html
checkContent.SetHTML("", true); //设置内容,后为bool,是否所见即所得
}
function aaa() {
var checkContent = FCKeditorAPI.GetInstance("editor"); //获取实例
checkContent.SwitchEditMode(); //转变编辑模式
checkContent.UpdateLinkedField(); //更新关联文件
}
function FCKeditor_OnComplete(checkContent) //当加载完
{
alert(checkContent.Name);
}
//设置fckeditor为只读
function FCKeditor_OnComplete(editorInstance) {
editorInstance.EditorDocument.body.disabled = true;
editorInstance.EditorWindow.parent.document.getElementById('xExpanded').style.display = 'none';
editorInstance.EditorWindow.parent.document.getElementById('xCollapsed').style.display = 'none';
editorInstance.EditorWindow.blur();
}
//向编辑器插入指定代码
function insertHTMLToEditor(codeStr) {
var oEditor = FCKeditorAPI.GetInstance("content");
if (oEditor.EditMode == FCK_EDITMODE_WYSIWYG) {
oEditor.InsertHtml(codeStr);
} else {
return false;
}
}
//统计编辑器中内容的字数
function getLength() {
var oEditor = FCKeditorAPI.GetInstance("content");
var oDOM = oEditor.EditorDocument;
var iLength;
if (document.all) {
iLength = oDOM.body.innerText.length;
} else {
var r = oDOM.createRange();
r.selectNodeContents(oDOM.body);
iLength = r.toString().length;
}
alert(iLength);
}
//执行指定动作
function ExecuteCommand(commandName) {
var oEditor = FCKeditorAPI.GetInstance("content");
oEditor.Commands.GetCommand(commandName).Execute();
}
//设置编辑器中内容
function SetContents(codeStr) {
var oEditor = FCKeditorAPI.GetInstance("content");
oEditor.SetHTML(codeStr);
}
//使用FCKEditor时使用js在光标处添加任意字符串
function InsertHTML(e, inStr) //eFCKEditorIDinStr:要插入的信息
{
var oEditor = FCKeditorAPI.GetInstance(e);
if (oEditor.EditMode == FCK_EDITMODE_WYSIWYG) {
oEditor.InsertHtml(inStr);
} else alert("You must be on WYSIWYG mode!");
}
function ExecuteCommand(commandName, e) {
var oEditor = FCKeditorAPI.GetInstance(e);
oEditor.Commands.GetCommand(commandName).Execute();
}

添加自定义控件

  1. 在fckconfig.js中的FCKConfig.ToolbarSets[“Default”]中添加控件名称 eg)”ImgUpload”
  2. 在lang/zh.js中添加对应的语言 eg)ImgUpload=”图片”
  3. 在js/fckeditorcode_ie.js中的两处添加对应的代码
    Jquery
    1
    2
    3
    4
    5
    6
    7
    var B = FCKToolbarItems.LoadedItems[A]; if (B) return B; switch (A) {
    // 之后添加
    case 'ImgUpload': B = new FCKToolbarButton('ImgUpload', FCKLang.ImgUpload, FCKLang.ImgUpload, null, false, true, 37);break;
    // 其中37为控件的图标编号。
    var B = FCKCommands.LoadedCommands[A]; if (B) return B; switch (A) {
    // 之后添加
    case 'ImgUpload': B = new FCKDialogCommand('ImgUpload', FCKLang.ImgUpload, 'dialog/img_upload/imgUpload.aspx', 450, 500); break;
  4. 添加对应的页面文件在地址中的位置

设置只读

Jquery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// FCKConfig中:
FCKConfig.ToolbarSets["ReadOnly"] = [
['Source', '-', 'Preview']
];
// html/aspx中:
// 添加属性 ToolbarSet="ReadOnly" 用于隐藏控件栏,只显示查看代码和预览
// 加载时处理
function FCKeditor_OnComplete(editorInstance) {
editorInstance.EditorDocument.body.disabled = flg;
}
// 实时处理,即满足条件处理
// 只读(内容变灰)
FCKeditorAPI.GetInstance('fckPC').EditorDocument.body.disabled = true;
// 只读(内容不变)
FCKeditorAPI.GetInstance("fckPC").EditorDocument.body.contentEditable=false;
// 或者用oEditor代替FCKeditorAPI.GetInstance('fckPC')
// 注:查看源码会改变只读属性

非空验证

Jquery
1
2
3
if(FCKeditorAPI.GetInstance("fckPC").GetXHTML()==""){
alert("不能为空!")
}