FCKeditor如何使用

Posted 2023-04-11

我想保存这个在线编辑器的内容，如何保存，在VB.net中，如何保存带图片的文章，保存在什么地方？如果是保存在Access中又是怎么做的！我想实现下图功能，如何做到，主要是保存是怎么做的！

FCKEDITOR使用说明2008-01-29 12:11一、FCKEDITOR类参考:

构造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:编辑器的唯一名称(相当于ID)
WIDTH:宽度
HEIGHT:高度
toolbarSet:工具条集合的名称
value:编辑器初始化内容

属性:
instanceName:编辑器实例名
width:宽度,默认值为100%
height:高度,默认值是200
ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default
value:初始化编辑器的html代码,默认值为空
BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最好能用相对于站点根路径的表示方法,要以/结尾
CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true
DisplayErrors:是否显示提示错误,默为true;

集合:
Config[Key]=value;

这个集合用于更改配置中某一项的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";

方法:
Create() 建立并输出编辑器
RepaceTextArea(TextAreaName) 用编辑器来替换对应的文本框

二、配置FCKEDITOR
主配置文件名为Fckconfig.js

FCKEDITOR提供了一套用于定制其外观,特性及行为的设置集.你既可以编辑主配置文件,也可以自己定义单独的配置文件.配置文件使用javascript语法.

修改后,在建立编辑器时,可以使用以下语法:
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Config['CustomConfigurationsPath'] = '/myconfig.js' ;
oFCKeditor.Create() ;

提醒:当你修改配置后,请清空浏览器缓存以查看效果

配置选项:
AutoDetectLanguage=true/false 自动检测语言
BaseHref="" 相对链接的基地址
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage="" 缺省语言
EditorAreaCss="" 编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors="" 设置显示颜色拾取器时文字颜色列表
FontFormats="" 设置显示在文字格式列表中的命名
FontNames="" 字体列表中的字体名
FontSizes="" 字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本
ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体
FormatIndentator="" 当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码
FormatSource=true/false 在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能
ImageBrowserURL="" 浏览服务器时运行的URL
ImageBrowserWindowHeight="" 图像浏览器窗口高度
ImageBrowserWindowWidth="" 图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器
LinkBrowserURL="" 插入链接时浏览服务器的URL
LinkBrowserWindowHeight=""链接目标浏览器窗口高度
LinkBrowserWindowWidth=""链接目标浏览器窗口宽度
Plugins=object 注册插件
PluginsPath="" 插件文件夹
ShowBorders=true/false 合并边框
SkinPath="" 皮肤文件夹位置
SmileyColumns=12 图符窗列数
SmileyImages=字符数组 图符窗中图片文件名数组
SmileyPath="" 图符文件夹路径
SmileyWindowHeight 图符窗口高度
SmileyWindowWidth 图符窗口宽度
SpellChecker="ieSpell/Spellerpages" 设置拼写检查器
StartupFocus=true/false 开启时FOCUS到编辑器
StylesXmlPath="" 设置定义CSS样式列表的XML文件的位置
TabSpaces=4 TAB键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR集合
ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记

三、自定义样式列表
FckStyls.xml是默认的自定义样式列表文件。
FCKEDITOR的样式工具栏中提供了预定义的样式,样式是通过XML文件定义的,默认的XML样式文件存在于FCkEditor根文件夹下的FckStyls.xml文件中这个XML文件的结构分析如下:

<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>

每一个STYLE标记定义一种样式,NAME是显示在下拉列表中的样式名,ELEMENT属性指定此样式所适用的对象,因为FCKEDITOR中的样式是上下文敏感的,也就是说,选择不同的对象,仅会显示针对这类对象定义的样式

四、拼写检查

FCKEDITOR 带了两种拼写检查工具,一种是ieSpell,默认情况下使用这种,使用这种方式的拼写检查,要求客户下载并安装iespell这个小软件,另外,也提供 SpellPager的方式来进行拼写检查,不过,由于SPELLPAGER是由php编写的服务器端脚本,因此,要求你的WEB服务器必须支持PHP脚本语言方可
更改拼写检查器的方式请参见有关配置文件的详细说明

五、压缩脚本

为了提供脚本载入的效率,FCKEDITOR采用以下方法对脚本尽量压缩以减少脚本尺寸:
1,移除掉脚本中的注释
2.移除掉脚本中所有无意义的空白
另外,FCKEDITOR还提供了一个专门用于压缩脚本的工具以便 你在发布时能减小文件尺寸,你可以将_Packager文件夹中的Fckeditor.Packager.exe复制到FCKEDITOR根文件夹来运行并压缩脚本

六、本地化FCKEDITOR
如果FCKEDITOR没有提供您所需要的语言(实际上全有了),你也可以自行制作新的语言,你只需要复制出EN.JS,然后在其基础上进行翻译.另外,语言名称与对应的脚本文件名必须遵循RFC 3066标准,但是,需要小写,例如:Portuguess Language对应的脚本文件名必须为pt.js如果需要针对某个国家的某种语系,则可以在语系缩写后加上横线及国家缩写即可

在使用时,系统会自动侦测客户端语系及国别而运用适当的界面语言.

当建立一种新的语言后,你必须在"Edit/lang/fcklanguagemanager.js"中为其建立一个条目,如下所示:
FCKLanguageManager.AvailableLanguages =


en : 'English',
pt : 'Portuguese'


需要提醒的是,文件必须保存为UTF-8格式

六、与ASP.NET服务器端脚本进行交互
1.把FCKEDITOR添中到工具箱
2.托拽FCKEDITOR控件到页面
3.为其指定名称
4.FCKEDITOR 类的所有属性不光可以在代码中使用,而且可以作为FCKEDITOR控件的属性直接使用,例如,要改变皮肤,可以在UI页面中指定SkinPath= "/fckeditor/editor/skins/office2003"即可,其实FCKEDITOR的ASP.NET版本可以做得更好,你可以找到 FCKEDITOR ASP.NET 2.1的源文件,然后修改该控件的设计,为其暴露更多有用的属性,重新编译即可
5,POSTBACK后的数据,使用FCKEDITOR控件的value属性获得
6. 由于默认状态下,ASP.NET不允许提交含有HTML及JAVASCRIPT的内容,因此,你必须将使用FCKEDITOR的页面的 ValidateRequest设为false.(<%@page validteRequest="false" %>即可)

七、设置上传文件语言

把FCKeditor根目录下面的fckconfig.js文件里

var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php

这两行中改成您所需要调用的编辑器语言，如用asp.net则改为aspx；

八、解决中文的问题:
在web.config中加入:
<globalization requestEncoding="GB2312" responseEncoding="GB2312"/>
这样设置后可以显示中文的文件，但URL地址也是中文的；
如果服务器对中文地址的解析不好，可能导致图片无法浏览；
所以修改：editor\filemanager\browser\default\frmresourceslist.html
中的OpenFile函数，把
window.top.opener.SetUrl( fileUrl ) ;
修改为:
window.top.opener.SetUrl( escape(fileUrl) ) ;

九.设置上传的目录：
1:在web.config中设置:
<appSettings>
<add key="FCKeditor:UserFilesPath" value="/fck/UpLoad/" />
</appSettings>

2:在Session中设置:
在editor\filemanager\browser\default\connectors\aspx\connector.aspx中加入以下代码:
<script runat="server" language="C#">
protected override void OnInit(EventArgs e)

Session["FCKeditor:UserFilesPath"] = "/fck/UpLoad1/";

</script>

参考资料：网上搜吧，这个操作很多！

参考技术A FCKeditor 有很多例子。保存图片的先建立一个文件夹，在FCKeditor的配置中指定文件夹名称。这样就可以把图片文章一起发布了

如何在 FCKeditor 中*动态*更改图像上传路径

【中文标题】如何在 FCKeditor 中*动态*更改图像上传路径

【英文标题】：How do I change image upload path *dynamically* in FCKeditor

【发布时间】：2010-11-19 14:29:40

【问题描述】：

我正在为我的 FCKeditor 使用 ASP.NET 二进制文件，并且需要在同一页面上插入两个编辑器。上传的图片/浏览需要到两个不同的目录，我如何从代码隐藏中做到这一点？

我知道上传文件的路径是在config.ascx-file 中设置的UserFilesPath 设置，但我找不到从我的aspx.cs 文件中覆盖此值的方法。

另外，我发现（冲突的）文档指出可以设置 Session["FCKeditor:UserFilesPath"]，但我不喜欢将特定于用户控件的信息放在全局会话变量中。

【参考方案1】：

天哪，经过一番挣扎，我唯一能得到的是：

fckEditor1.Config

属性。尝试为您要配置的编辑器设置它：

fckEditor1.Config["UserFilesPath"]="你的路径"

【讨论】：

感谢您尝试帮助我，但这不起作用。 config-property 仅适用于实际编辑器，不适用于编辑器文件浏览器。

【参考方案2】：

这可能会奏效。至少它对我有用。

Session["FCKeditor:UserFilesPath"] = "~/images/";

【参考方案3】：

抱歉，我认为最好的办法是停止使用控件，而改用 javascript api。

【参考方案4】：

首先您需要将用户身份信息分配给 Session["UserInfo"]

然后转到 [fckeditor 根文件夹]/filemanager/connector/aspx/config.ascx

string Userfolder = Session["UserInfo"].ToString(); // URL path to user files. UserFilesPath = "~/Upload/" + Userfolder;

【参考方案5】：

完整主题：FCK 编辑器 2.x：使用单个 FCKeditor 将文件/图像/视频上传到不同文件夹中的不同应用程序，以安全的方式使 $Config['UserFilesPath'] 完全动态

它可以通过多种方式完成。我正在解释一个过程，我根据我的 php 应用程序的代码结构应用了该过程。我为不同的应用程序遵循相同的代码结构/框架，每个应用程序都作为我服务器中的子文件夹。因此，逻辑上需要使用一个单一的 FCKeditor 并以某种方式对其进行配置，以使其适用于所有应用程序。 FCKeditor 的内容部分还可以。它可以很容易地被来自单个 FCKeditor 组件的不同应用程序或项目重用。但是文件上传会出现问题，例如图像、视频或任何其他文档。为了使其适用于不同的项目，文件必须上传到不同项目的单独文件夹中。而对于 $Config['UserFilesPath'] 必须通过配置动态文件夹路径，意味着每个项目的不同文件夹路径，但在同一位置调用相同的 FCKeditor 组件。我正在逐步解释一些不同的过程。这些在 FCKeditor 版本 2.5.1 和 VersionBuild 17566 上对我很有效，我希望它们也能对其他人有效。如果它不适用于其他开发人员，那么他们可能需要根据他们的项目代码结构和文件夹写入权限以及 FCKeditor 版本在这些过程中进行一些调整。

1) 在 fckeditor\editor\filemanager\connectors\phpconfig.php 文件中

a) 追求全局 $Config ；和 $Config['Enabled'] = false ; i) 在那里，如果想要一个依赖于会话的安全方法：仅适用于单个站点设置：即每个项目域或子域一个 FCKeditor，而不是多个项目一个 FCKeditor，然后放置此代码：

if(!isset($_SESSION))
session_start(); 


if(isset($_SESSION['SESSION_SERVER_RELATIVEPATH']) && $_SESSION['SESSION_SERVER_RELATIVEPATH']!="")  
$relative_path=$_SESSION['SESSION_SERVER_RELATIVEPATH']; 
include_once($_SERVER['DOCUMENT_ROOT'].$relative_path."configurations/configuration.php");

N.B.：这里，$_SESSION['SESSION_SERVER_RELATIVEPATH']：webroot对应的项目的相对文件夹路径；应该类似于“/project/folder/path/”并将此会话变量设置在会话开始的项目中的一个公共文件中。并且应该有一个configurations/configuration.php作为你的项目中的配置文件。如果它的名称或路径不同，您必须在此处放置相应的路径而不是configurations/configuration.php

ii) 如果想为不同的项目使用单个 FCKeditor 组件，这些项目表示为不同的子文件夹，并使用依赖于会话的安全方式（假设不同项目的 session_name 不同，以区分它们在单个服务器中的会话）。但是，如果项目表示为子域或不同域，则必须使用下面提供的会话独立方式（iii）（尽管它不安全），则它将不起作用。放置此代码：

if(!isset($_SESSION))
session_name($_REQUEST['param_project_to_fck']); 
session_start(); 


if(isset($_SESSION['SESSION_SERVER_RELATIVEPATH']) && $_SESSION['SESSION_SERVER_RELATIVEPATH']!="")  
$relative_path=$_SESSION['SESSION_SERVER_RELATIVEPATH']; 
include_once($_SERVER['DOCUMENT_ROOT'].$relative_path."configurations/configuration.php");

请阅读 N.B.在上一点的末尾，即点 (i)

iii) 如果想为不同的项目使用单个 FCKeditor 组件，则代表不同的子文件夹以及子域或域（尽管它并不完全安全）。放置此代码：

if(isset($_REQUEST['param_project_to_fck']) && $_REQUEST['param_project_to_fck']!="") //base64 encoded relative folder path of the project corresponding to the webroot; should be like "/project/folder/path/" before encoding 
$relative_path=base64_decode($_REQUEST['param_project_to_fck']);
include_once($_SERVER['DOCUMENT_ROOT'].$relative_path."configurations/configuration.php");

请阅读 N.B.在第 (i) 点的末尾

b)现在，对于您选择的任何情况，请找到以下代码：

// Path to user files relative to the document root.
$Config['UserFilesPath'] = '/userfiles/' ;

并替换以下代码：

if(isset($SERVER_RELATIVEPATH) &&  $SERVER_RELATIVEPATH==$relative_path)  //to make it relatively secure so that hackers can not create any upload folder automatcally in the server, using a direct link and can not upload files there 
$Config['Enabled'] = true ;
$file_upload_relative_path=$SERVER_RELATIVEPATH;
else
$Config['Enabled'] = false ;
exit();

// Path to user files relative to the document root.
//$Config['UserFilesPath'] = '/userfiles/' ;
//$Config['UserFilesPath'] = $file_upload_relative_path.'userfiles/' ;
$Config['UserFilesPath'] = '/userfiles'.$file_upload_relative_path;

这里的 $SERVER_RELATIVEPATH 是相对路径，必须在之前包含的项目配置文件中设置。

在这里，您可以使用 $file_upload_relative_path 变量将 $Config['UserFilesPath'] 设置为任何其他动态文件夹路径。在我的 bluehost linux 服务器中，因为它们是项目根文件夹（0755 权限）和它下的 userfiles 文件夹和 userfiles 下的子文件夹（根据 FCKeditor 编码应为 0777），因此它不允许在这些文件夹中上传文件。因此，我在服务器 webroot（项目根文件夹之外）创建了一个文件夹 userfiles，并将权限设置为 0777，使用 $config 设置的代码为：

$Config['UserFilesPath'] = '/userfiles'.$file_upload_relative_path; 

但是，如果您对项目子文件夹的写权限没有问题，那么您可以使用上一行（在上一个代码段中注释掉）：

$Config['UserFilesPath'] = $file_upload_relative_path.'userfiles/' ;

请注意，您将现有的 $Config['UserFilesPath'] = '/userfiles/' 注释掉；如果它存在于文件的其他位置，则通过替换或简单地注释掉此文件中的内容。

2) 如果您选择 1) (a) (ii) 或 (iii) 方法，则打开 (a) fckeditor\editor\filemanager\browser\default\browser.html 文件。

搜索此行： var sConnUrl = GetUrlParam( 'Connector' ) ;

将这些命令放在该行之后：

var param_project_to_fck = GetUrlParam( 'param_project_to_fck' ) ; 

现在，搜索这一行： sUrl += '&CurrentFolder=' + encodeURIComponent( this.CurrentFolder ) ;

将该命令放在该行之后：

sUrl += '&param_project_to_fck=' + param_project_to_fck ; 

(b) 现在，打开 ckeditor\editor\filemanager\browser\default\frmupload.html 文件。

搜索这一行（应该在 SetCurrentFolder() 函数中）：

sUrl += '&CurrentFolder=' + encodeURIComponent( folderPath ) ;

将该命令放在该行之后：

sUrl += '&param_project_to_fck='+window.parent.param_project_to_fck;

3) 现在您想在项目中显示 FCKeditor 的位置，您必须将这些行放在相应的 php 文件/页面中：

include_once(Absolute/Folder/path/for/FCKeditor/."fckeditor/fckeditor.php") ; 
$oFCKeditor = new FCKeditor(Field_name_for_editor_content_area) ;
$oFCKeditor->BasePath = http_full_path_for_FCKeditor_location.'fckeditor/' ;
$oFCKeditor->Height = 400;
$oFCKeditor->Width = 600;
$oFCKeditor->Value =Your_desired_content_to_show_in_editor;
$oFCKeditor->Create() ; 

a) 现在，如果您选择 1) (a) (ii) 或 (iii) 方法，则在该行之前放置以下代码段： $oFCKeditor->Create() ;

$oFCKeditor->Config["LinkBrowserURL"] = ($oFCKeditor->BasePath)."editor/filemanager/browser/default/browser.html?Connector=../../connectors/php/connector.php&param_project_to_fck=".base64_encode($SERVER_RELATIVEPATH);
$oFCKeditor->Config["ImageBrowserURL"] = ($oFCKeditor->BasePath)."editor/filemanager/browser/default/browser.html?Type=Image&Connector=../../connectors/php/connector.php&param_project_to_fck=".base64_encode($SERVER_RELATIVEPATH);
$oFCKeditor->Config["FlashBrowserURL"] = ($oFCKeditor->BasePath)."editor/filemanager/browser/default/browser.html?Type=Flash&Connector=../../connectors/php/connector.php&param_project_to_fck=".base64_encode($SERVER_RELATIVEPATH);

b) 如果您选择 1) (a) (ii) 方法，那么在上面的代码代码段中，只需将所有文本：base64_encode($SERVER_RELATIVEPATH) 替换为：base64_encode(session_name())

你就完成了。