FCKeditor使用说明

最新推荐文章于 2024-11-08 16:09:18 发布

panyanyan

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量481

点赞数

分类专栏： asp.net 文章标签： fckeditor javascript function asp.net 文件管理器 firefox

asp.net 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

FCKeditor使用说明收藏

1. 说明

官方网站：http://www.fckeditor.net/

现在最新的版本是FCKeditor 2.6.3 ，本使用文档使用的也是该版本。

2. FCKeditor介绍

1) 功能上： FCKeditor具备具备基本编辑功能、支持插入表情、图片、特殊符号，FLASH、表格、完整的表单自带了文件管理器、整张网页编辑,支持插件，皮肤、样式表、软键盘；

2) 特色上：FCKeditor样式表功能是基于xml的在设置上要比较复杂，但是功能上却更强大，自带了各种多国语言，翻译质量不错。有完整的服务器文件管理、上传功能（需要设置）。支持各种服务器语言（asp php .net html perl fcm），ui界面采用了网页对话框设计。

3. 配置环境：

(1) 将Fckeditor_2.6.3的核心包fckeditor复制到网站根目录下。

(2) 配置aspx环境：

1) fckeditor文件夹下：

fckconfig.js

a. 添加中文字体编辑：

FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆' ;

b. 后台处理方式：

var _FileBrowserLanguage = 'php' ; （276行）

var _QuickUploadLanguage = 'php' ;

更改为aspx

2) 将FCKeditor.Net_2.6.3/_samples/aspx文件夹复制到/fckeditor/_samples

将对应的.net framework 版本2.0下的内容复制到aspx文件夹下，删除多余的文件。

3) 在文件夹/fckeditor/editor/filemanager/connectors/aspx 下找到Config.ascx

a. 设置可以上传 return true；

b. 设置上传路径 UserFilesPath = "~/upload/"; 注意不能是虚拟目录，必须是实际存在的，且路径正确。

4. 调用FCKeditor：

(1) 首先要在页面的<head>标签中添加FCKeditor的引用，如下：

<script type="text/javascript" src="fckeditor/fckeditor.js"></script>

注：fckeditor.js文件位于FCKeditor下载的核心包根目录下。

(2) 现在，FCKeditor已经准备好了，就可以使用了。

在官方的文档中，使用JavaScript的方式，提供了三种调用FCKeditor的方法，下面我一一介绍一下：

1) 在JavaScript脚本中生成

<script type="text/javascript">

var oFCKeditor = new FCKeditor('FCKeditor1');

oFCKeditor.BasePath = "/fckeditor/"; //FCKeditor解压包相对于此js放置的位置

oFCKeditor.Create();

</script>

2) 替换textarea

针对jQuery,我对此方法进行重写：

A. 首先，在页面的<body>内创建一个textrarea

<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>

B. 调用js，替换textarea：

<script type="text/javascript">

$(document).ready(function(){

var oFCKeditor = new FCKeditor( 'MyTextarea' ) ; //textarea id

oFCKeditor.BasePath = "/fckeditor/" ;

oFCKeditor.ReplaceTextarea() ;

});

</script>

3) 在ajax中，使用CreateHtml()的方法

var div = document.getElementById("myFCKeditor");

var fck = new FCKeditor("myFCKeditor");

div.innerHTML = fck.CreateHtml();

注：页面中有div id= myFCKeditor

5. 获取FCKeditor内容（important！）

示例参考：http://www.shuro.cn/article.asp?id=341

我花了很大的功夫来使用FCKeditorAPI，但是一直出现FCKeditorAPI undefined的错误，用firebug调试后，才知道是获取的实例对象错误：

-------源代码示例----------

$(document).ready(function(){

var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;

oFCKeditor.BasePath = "fckeditor/" ;

oFCKeditor.ToolbarSet = "Default";

document.getElementById("htmleditor").innerHTML = oFCKeditor.CreateHtml();

$('#btnOK').click(function(){

var text = getEditorTextContents('MyTextarea');

alert(text);

});

});

//获取编辑器中文字内容

function getEditorTextContents(EditorName) {

var oEditor = FCKeditorAPI.GetInstance(EditorName);

return(oEditor.GetXHTML(true));

}

--------------

注意：由于我们创建的FCKeditor的名称定义为'MyTextarea' ，那么，当FCKeditor加载完成后，想通过FCKeditorAPI获得实例，实例名仍然是'MyTextarea' ，而不是id="htmleditor"的div，这点务必要弄清楚！

其他方法和实例，可参考网站http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide

6. 自定义配置文件(fckconfig.js)

(1) 工具按钮的设置：

在FCKConfig.ToolbarSets["Default"]中，设置了很多按钮，下面我对其进行详细介绍：

-------- Default Toolbar--------

EditSource 显示HTML源代码 StrikeThrough 删除线

Save 保存 Subscript 下标

NewPage 新建空白页面 Superscript 上标

Preview 预览 JustifyLeft 左对齐

Cut 剪切 JustifyCenter 居中对齐

Copy 复制 JustifyRight 右对齐

Paste 粘贴 JustifyFull 两端对齐

PasteWord 来自Word的粘贴 InsertUnorderedList 项目符号

Print 打印 Outdent 减少缩进

SpellCheck 拼写检查 Indent 增加缩进

Find 查找 ShowTableBorders 显示表格线

Replace 替换 ShowDetails 显示明细

Undo 撤销 Form 添加Form动作

Redo 还原 Checkbox 复选框

SelectAll 全选 Radio 单选按钮

RemoveFormat 去除格式 Input 单行文本框

Link 插入/编辑链接 Textarea 滚动文本框

RemoveLink 去除连接 Select 下拉菜单

Anchor 锚点 Button 按钮

Image 插入/编辑图片 ImageButton 图片按钮

Table 插入/编辑表格 Hidden 隐藏

Rule 插入水平线 Zoom 显示比例

SpecialChar 插入特殊字符 FontStyleAdv 系统字体

UniversalKey 软键盘 FontStyle 字体样式

Smiley 插入表情符号 FontFormat 字体格式

About 关于 Font 字体

Bold 粗体 FontSize 字体大小

Italic 斜体 TextColor 文字颜色

Underline 下划线 BGColor 背景色

----------------

上面默认的是包含了所有的工具按钮，针对到具体情况的时候，有些按钮并不需要，而且还影响速度。那么我们就可以将不需要的按钮给删了。

例如：当用户回复一条帖子的时候，我们可以设置为：

FCKConfig.ToolbarSets["Basic"] = [

['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','

-','About']

] ;

(2) 语言的配置：

查找 FCKConfig.DefaultLanguage 将它设置为'zh-cn'. (157行)

(3) 脚本语言的设置：（attention！）

这个已经在前面的“配置环境”中已经讲了，再次重复，如果不更改

var _FileBrowserLanguage 和var _QuickUploadLanguage 将他们设置为

'aspx', (276行) 默认是'asp',如果这里不设置的话，图片将不能上传，这点很重要。

当然，以上这些配置都是在config文件中进行的更改，我们也可以在JavaScript脚本中去实现。例如：在初始化FCKeditor的时候

oFCKeditor.ToolbarSet = "Basic"; //设置工具栏显示样式

oFCKeditor.Config['FullPage'] = true; //设置可以对FCKeditor中的内容从<html></html>全部进行编辑

7.图片上传配置

fckeditor/editor/filemanager/connectors/aspx 文件夹下：

(1) Config.ascx :

private bool CheckAuthentication()

{

Return true;

}

// URL path to user files.

UserFilesPath = "upload/"; //上传文件存放的路径

(2) Upload.aspx：

文档中已经说明：这个上传是为ASP.NET的，如果想实现上传到俄功能，必须添加FredCK.FCKeditorV2.dll到bin文件夹下。

我采用的方法是将项目建为ASP.Net web Application.添加引用。

项目下载地址： http://download.csdn.net/user/spring21st FCKPro(aspx)

8.FAQ

(1) 使用“安全卫士360”可能导致firefox无法访问localhost，建议使用firefox调试页面的时候，关闭“安全卫士360”(或取消所有的“实时保护”功能)。