首先介绍一下CKeditor的技术,其实CKeditor就是FCKeditor的升级版本,改名主要是与它公司的名字有关,这就是新出的版本Ckeditor3.0 官方网为:http://www.fckeditor.net/
develops Guide 这个开发指南相当不错,一般我们学一样东西都是直接去看这个技术的开发指南,里面有一般的用法,让你迅速上手,而且很容易搞懂这些配置。首先下载FCKeditor2.6.5.zip包,这个包是必须的,而且与语言无关。第二个必须包是FCKeditor.net_2.6.3.zip包。下载完这两个包,马上就可以开始web开发了。
当然首先你要看看Demo的东西,毕竟它是官方自带的例子,肯定值得我们去研究,而且里面的代码很有参考价值,到了这一步,我相信就很容易做了。
开发指南网址:http://docs.cksource.com/CKEditor_3.x/Developers_Guide
下面讲讲FCKeditor.Net编辑器在.net环境的配置方法。
第一步:解压缩FCKeditor_2.6.3.zip文件,并将解压缩得到的fckeditor文件夹复制到你想使用这个编辑器的网站的根目录下面。
第二步:把下载的FCKeditor.Net.zip随便解压缩到你硬盘的一个空目录,里面是FCKeditor.Net的源代码,可以对它进行再度开发,我这里讲直接应用,我们要使用到是其目录下的\bin\Debug目录中的FredCK.FCKeditorV2.dll文件。在你的网站里面把这个FredCK.FCKeditorV2.dll添加到bin目录下。
第三步:进入FCKeditor文件夹,编辑 fckconfig.js 文件,如下:
1、指定编辑器应用的编程环境,修改
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
改为
var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php
2、配置语言包。有英文、繁体中文等,这里我们使用简体中文。
修改
FCKConfig.DefaultLanguage = 'en' ;
为
FCKConfig.DefaultLanguage = 'zh-cn' ;
3、配置皮肤。有default、office2003、silver风格等,这里我们可以使用默认。
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
4、在编辑器域内可以使用Tab键。(1为是,0为否)
FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ;
5、加上几种我们常用的字体的方法,例如:
修改
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
为
FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'
6、编辑器域内默认的显示字体为12px,想要修改可以通过修改样式表来达到要求,打开/editor/css/fck_editorarea.css,修改font-size属性即可。如font-size: 14px;
7、关于安全性。
如果你的编辑器用在网站前台的话,那就不得不考虑安全了,在前台千万不要使用Default的toolbar,要么自定义一下功能,要么就用系统已经定义好的Basic,也就是基本的toolbar,
修改
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
为
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']
] ;
第四步:在Web.Config文件里面添加,如下所示
1、配置WebConfig,在<appSettings>节点添加,如下所示:
如果你用的是默认的上传功能,则
<add key="FCKeditor:BasePath" value="~/fckeditor/"/>
<add key="FCKeditor:UserFilesPath" value="/网站名称/UploadFiles/"/>
第五步:在页面里应用FCKeditor编辑器
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" validateRequest="false" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
// 这里要主要两个参数
// 默认为<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
// 我们要添加一个参数 validateRequest=false,否则提交带html代码的内容会报错
// 从客户端(...)中检测到有潜在危险的 Request.Form 值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server">
</FCKeditorV2:FCKeditor>
</div>
</form>
</body>
</html>
如何获取其内容呢?读取FCKeditor1控件的Value属性值即可。
到这里基本OK了,但是我发现在使用图片上传功能的时候,会弹出一个阻止框,显示"this connector is disabled Please check the"editor/filemanager/connectors/aspx/config.aspx",解决这个错误的方法是打开editor/filemanager/connectors/aspx/config.ascx修改CheckAuthentication()方法,返回true
C# code
private bool CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
//
// return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
//
// ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
// user logs in your system.
return true;
}
下载地址:http://www.fckeditor.net/download
FCKeditor使用
一、配置
1、在www.fckeditor.net点击Download,下载FCKEditor_2.5.1.zip和FCKEditor.Net(ASP.NET Control to easily integrate FCKEditor on .Net Web pages.)
2、新建一项目,比如叫FCK。解压FCKEditor_2.5.1.zip,里面有个fckeditor目录。把该目录整个复制到新建的ASP.NET项目根目录下。打开fckeditor目录下的fckconfig.js,修改二项:
FCKConfig.DefaultLanguage = 'en' ;
改为
FCKConfig.DefaultLanguage = 'zh-cn' ;
-----------------------------------------------------
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
改为
var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
3、在vs05/08的工具箱上新建一个名叫FCKEditor的Tab,然后在里面点右键,选择Choose Item,定位到解压FCKEditor.Net后生成的FCKEditor2.51\FCKeditor.Net_2.5\bin\Release\2.0目录下的FredCK.FCKEditorV2.dll。该Tab下就会生成一个FCKEditor的.net组件。在vs的Design模式下把该组件拖放到界面上。点击该组件,在属性面板上设置BashPath为/FCK/fckeditor/,注意这里的FCK就是你建的ASP.NET的项目名称,fckeditor为项目根目录下的目录名称。(注意:/FCK/fckeditor/前后的斜杠,少了一个都不会显示编辑器的)。Ctrl+F5!
其它次要配置(不影响使用):
* 可以把fckeditor目录及其子目录下所有下划下开头的范例、源文件删掉。
* 可以在fckeditor目录下只保留fckconfig.js、fckeditor.js和几个xml文件,其余全部删掉。
* fckeditor目录下的editor目录下有个filemanager目录,把该目录下的borswer\default\connectors目录中除aspx目录以外的全部目录删掉。
* 可以把editor\lang目录下除zh-cn.js、en.js、zh.js之外的全部删掉。
二、图片上传
FCKEditor支持图片上传。可以在ASP.NET项目根目录下添加一目录,起名为UploadFiles.
在web.config里的appSettings段里
<appSettings>
<add key="FCKEditor:BasePath" value="/FCK/fckeditor"/>
<add key="FCKeditor:UserFilesPath" value="/FCK/UploadFiles/" />
</appSettings>
注意UserFielsPath,这里设置的/FCK/UploadFiles/指定了要上传的目录。个人认为这里的FCK可以认为是服务器上的虚拟目录名。(另外发现如设为时不起作用)。
当上传图片时有可能遇到"this connector is disabled Please check the"editor/filemanager/connectors/aspx/config.aspx"的错误,这时可以更改fckeditor\editor\filemanager\connectors\aspx\config.ascx的CheckAuthentication()方法,返回true.
三、简单的FCKEditor存取数据库及显示
1、在项目里添加新项Sql Server Database, 文件名保留为Database.mdf。在里面新建一表MyTable,只有两个字段,一个int型自动增加的primary key, 另一个是text类型的MyContent. 我们要把FCKEditor1.Value值存到这个字段里。
2、先做个显示的页面。项目增加一个Show.aspx,拖一个SqlDataSource,设置一下返回MyTable的内容。再用Repeater显示。
//代码
<asp:Repeater ID="myRepeater" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("MyContent") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%nbsp;ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [OID], [MyContent] FROM [MyTable] ORDER BY [OID] DESC"></asp:SqlDataSource>
3、存入数据库
项目中引用System.Configuration(为了使用System.Web.WebConfigurationManager)
在FCKEditor界面上入一个按钮,然后
protected void Button1_Click(object sender, EventArgs e)
{
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = "insert into MyTable(MyContent) values(@FCKContent)";
cmd.Parameters.AddWithValue("FCKContent",FCKeditor1.Value);
conn.Open();
cmd.ExecuteNonQuery();
}
}
分享到:
相关推荐
最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...
ckeditor5-v30 全工具版 ,基本将免费的工具备齐了,源文件,可自行修改重新打包,node_modules 文件夹为包文件,该文件夹容量较大,在实际应用时可以删除,必须在网站模式使用,如:...该版本表格插件与微软的edge...
把ckeditor 3.4的ckeditor.js复盖就行
之前在网上下载的都不可以用,于是想尽办法发现是网上提供的是不支持最新的ckeditor.用法找见自己的ckeditor地址让后放到ckeditor/plugins/ 下,最后修改ckeditor/config.js,如果之前添加过工具则在 config....
本插件源码来自互联网,由于源代码基于ckeditor3.6.61,故对源码进行过简单修改,以求适应ckeditor4.4.7
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %> <CKEditor:CKEditorControl ID="editor1" BasePath="./ckeditor/" runat="server"></CKEditor:CKEditorControl> ...
FLV视频格式具有本身占有率低、视频质量良好、体积小等特点,非常适合在网络...但是,在新版本的CKEditor里却没有FLV格式视频的支持。于是我自己动手开发CKEditor的FLV视频播放插件现在上传。PS:这个版本是.net版的。
ckeditor5-v22 为当前最新版本,全工具版 ,基本将免费的工具备齐了,源文件,可自行修改重新打包,node_modules 文件夹为包文件,该文件夹容量较大,在实际应用时可以删除,必须在网站模式使用,如:...
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>-------引进CKEditor控件 【图书特色】 <CKEditor:CKEditorControl ID="bookFeature" runat="server" ></CKEditor:...
用于最新CKEditor4.0的行距插件,不能用于CKEditor3.X.X及以前版本
ckeditor5 v23,全工具版,下载配置了ckfinder,因考虑版权没有该文件,如果要实现下载功能,请将ckfinder以"ckfinder”为名命名文件夹放置在网站根目录,编辑器网页示例文件为ckeditor5-23.0.0\packages\ckeditor5-...
在asp中使用ckeditor开启图片上传功能的设置方法: 1、下载asp版本的ckfinder,放到ckeditor目录下 2、修改ckeditor\config.js,加上如下内容: CKEDITOR.editorConfig = function( config ) { config.scayt_...
ckeditor 4 代码插件安装 主页:wudimei.com 安装 把plugins复制到ckeditor目录中,注意是ckeditor4. 修改ckeditor/config.js,加入如下代码: CKEDITOR.editorConfig = function( config ) { // Define changes ...
直接在ckeditor的按钮中显示文件浏览按钮,点击后打开文件浏览窗口,上传或管理文件(必须安装ckfinder先) config.js中添加名为File的按钮 config.js中添加 ... 创建目录 ...ckeditor/skins/v2/file.gif
ckeditor4+ckfinder3.1组合,里面已作PHP初步配置,这是本人花了一上午时间搞定的.(已去除域名限制,有条件的朋友请资助下ckeditor项目组)
ckeditor3.4.1+ckfinder2.0.1(asp.net整合版) 使用方法: 1、在页面中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"> ...
2. index页面和Ckeditor要放在一个文件件目录下(建议放在头目录) 3. 跟CKeditor同等目录下创建文件夹upload/photo(记得给用户文件夹修改权限) 4. 上传代码在CKeditor目录下的upload.asp文件里 5. 不好意思的是...
ckeditor5_v19ie兼容版,长沙职业技术学院刘高明整理,QQ:25013364 1. 请将ckeditor5文件夹放网站根目录。 2. Ckfinder请自行从网上下载放在网站根目录。 3. 因属于完整版,速度会偏慢,如果要删除部分工具请从csdn...
开发的ckeditor插件,实现可视化在线数学符号编辑功能。 配置ckeditor部分如下: toolbar : [['Image','formula']], extraPlugins : 'formula',
如题ckeditor5 是当前比较流行的文章编辑器,精选常用插件,几乎涵盖了99%的常用功能,纯手工编译,已在项目中应用。如果想自己定义,也可以看我的博客中有相关教程