fckeditor在线编辑器配置指南

最新推荐文章于 2024-07-26 17:57:56 发布

weixin_34290000

最新推荐文章于 2024-07-26 17:57:56 发布

阅读量41

点赞数

文章标签： php xhtml c#

原文链接：http://blog.51cto.com/349445/90612

版权

项目中用到了在线编辑器，不知道用哪个好，在网上搜了一下，发现FckEditor是一个不错的组件。它有多国语言版，支持多个平台（Asp.Net,Asp,Php,Jsp等等）。但是这个组件下下了后，研究了好很一段时间才对它有了一个初步的认识，关于它网上有很多的文章，但是关于如何使用方面的例子却不多。

所以我打算做这样一个例子，方便大家在用到这个组件的时候能马上上手。我们要用它，首先我们的手头要先有这个组件（下载FckEditor_2.5.1）。因为我学的是.Net，而且也越来越流行，所以我的例子以Asp.Net为主。要让FckEditor支持.Net还要下载 FckEditor_Net。这个不是最新的版本，最新是 FckEditor2.6，版本不同，但是用法是一样的。那个版本都是一样，在我的例子中我用的是FckEditor2.5的。让我们先来看看这个里面都有什么？fcdeditor文件夹里如下图：

对于FckEditor_Net这个文件夹我们用到了里面Bin\Debug\2.0\ FredCK.FCKeditorV2.dll。如果你是.Net1.0的用户，则要用到Bin\Debug\1.0\FredCK.FCKeditorV2.dll。把这个DLL引用到你的网站根目录Bin 下面，再添加引用就行了。
对于FckEditor2.5.1，由于FckEditor是支持多语言、多平台的，我们现在要用的是Asp.Net 所以我们只找出我们要用的东西，其它的我们可以除掉。首先带“_”的文件和文件夹可以不要，它们是一些示例。

接下来我们继续给这瘦身。在 fckeditor文件夹里我们只留下editor、 fckconfig.js、 fckeditor.js、 fckstyles.xml、 fcktemplates.xml这五个文件，其它的都除掉。在Css里是这个组件用到的样式，我们可以不动它。Dialog里是一些弹出对话框不要动它，Dta也不要动。editor\file manager\connectors下面我们只要Aspx这一个就够了。这里提供的是我们对上传文件的管理。Lang我们只要Zh-cn.js这个是简体中文，它里面就是所能支持的所有的语言。Js里面是这个组件的核心，我们更是不能动，Plugins里面是一些插件，我们不用去管它，在做例子中我们会用到这里面的上传图片插件，而不用它默认的上传功能。Skin里面有三个皮肤:Default、Office2003，Silver。瘦身到此结束，文件夹大小减小了不少的。最后把fckeditor文件夹Copy到你的网站根目录下面。一切搞定，接下来配一下Web.config和fckconfig.js，就能像我们常用的用户自定义控件一样的使用了。
在Web.config的AppSettings中添加
如果你用的是默认的上传功能，则
<add key="FCKeditor:BasePath" value="~/fckeditor/"/>
<add key="FCKeditor:UserFilesPath" value="/网站名称/UploadFiles/"/>
如果你用的是InsertImage插件，则
<add key ="UploadDir" value ="UploadFiles"/>
<add key ="HostName" value ="主机名称\主机IP\[url]http://localhost[/url]"/> UploadFiles 是在你网站根目录下的，具有可写入的属性。其下有4个文件夹：p_w_picpath,flash,file,media。
在 fckconfig.js中找到 FCKConfig.DefaultLanguage＝en，修改为zh-cn。接着把
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ;// asp | aspx | cfm | lasso | perl | php | py
修改为aspx。
下面就可以用这个组件了。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
%>

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2"
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">

<title>三月软件工作室－－测试页</title>

</head>

<body>

<div>

<FCKeditorV2:FCKeditor id="OnLinkEditor" runat ="server"
></FCKeditorV2:FCKeditor>

</div>

</form>

</body>

</html>

这样你用的默认功能，用到的上传功能是可以浏览目录的，而且UploadFiles这个目录是可写的，这样对于服务器来说是很不安全的。如果你想自定义上传功能，并且有插入源代码的功能。那你就要接着往下看了。
打开fckconfig.js修改FCKConfig.ToolbarSets["Default"]的值如下：
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
/*['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField']*/,
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
[/*'Image','Flash',*/'InsertCode','InsertImage','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'],
我们注释了原来的Image,Flash 等等，加入了InsertCode,InsertImage。这是我们想要的功能。接下来我们得注册这两个功能在文件的最后面这样加两句：
FCKConfig.Plugins.Add( 'insertcodecommands', null, FCKConfig.BasePath + 'plugins/' ) ;
FCKConfig.Plugins.Add( 'InsertImage', null, FCKConfig.BasePath + 'plugins/' ) ;
并将FCKConfig.LinkBrowser = true ;FCKConfig.ImageBrowser = true ;
FCKConfig.FlashBrowser = true ;的值修改为false。

到这里，总算是说完了。但是对于这个组件还是有一些问题的，在园子里也找了一下，没有得到解决。希望有高手指点一下：这个组件我还没有做到能上传Flash 和Media 。

如果报错 XML request error: Internal Server Error(500) （图片上传时），考虑一下几点：

1. 要上传的文件夹是否存在， < add key = "FCKeditor:UserFilesPath"value="/FCK_test/Files/"/>

2. fckeditor 文件夹的相对位置是否正确，<addkey="FCKeditor:BasePath"value="~/fckeditor/"/>

3. fckeditor/fckconfig.js 文件是否修改

4. 在IIS 中建立虚拟目录，打开“写入权限”

转载于:https://blog.51cto.com/349445/90612

weixin_34290000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fckeditor在线编辑器配置指南

项目中用到了在线编辑器，不知道用哪个好，在网上搜了一下，发现FckEditor是一个不错的组件。它有多国语言版，支持多个平台（Asp.Net,Asp,Php,Jsp等等）。但是这个组件下下了后，研究了好很一段时间才对它有了一个初步的认识，关于它网上有很多的文章，但是关于如何使用方面的例子却不多。所以我打算做这样一个例子，方便大家在用到这个组件的时候能马上上手。我们要用它，首先...
复制链接

扫一扫