asp中安装配置FCKEditor2.6.6方法与配置说明
对于ASP系统来说:
FCKEditor根目录,仅保留"fckeditor.asp,fckconfig.js,fckeditor.js,fckpackager.xml,fckstyles.xml,
fcktemplates.xml"这些文件以及editor目录。删除示例目录"_samples"。
"fckeditoreditorfilemanagerconnectors"目录下面仅保留"asp"目录,删除其它目录和文件。
(2)修改文件上传采用的脚本程序(语言)。
默认的FCKEditor文件上传程序为asp,如果是用在asp系统中,那就不用再修改了。
如果是用在PHP系统中的话,需要做如下修改,打开fckconfig.js
找到:
代码如下 | 复制代码 |
var _FileBrowserLang ge = asp var _QuickUploadLang ge = asp 改成: var _FileBrowserLang ge = php var _QuickUploadLang ge = php |
(3)开启文件上传,修改文件上传目录。
对于ASP系统来说:
打开
代码如下 | 复制代码 |
fckeditoreditorfilemanagerconnectorsaspconfig.asp |
启用文件上传:
代码如下 | 复制代码 |
找到: 改成: 设置上传存放目录: 找到: |
对于PHP系统来说:
打开
代码如下 | 复制代码 |
fckeditor/editor/filemanager/browser/default/connectors/php/config.php |
启用文件上传:
代码如下 | 复制代码 |
找到: 改成: |
设置上传存放目录:
找到:
代码如下 | 复制代码 |
$Config[UserFilesPath] = /userfiles/ 改成: $Config[UserFilesPath] = 自定义的路径 |
(4)修改上传文件命名方式。
FCKEditor上传文件,文件名采用原文件名,如果想采用自定义的文件命名方式(比如,随即名称),可以修改如下地
方:
对于ASP系统来说:
代码如下 | 复制代码 |
打开fckeditorsampleediteditorfilemanagerconnectorsaspcommands.asp 找到: 将该句改为自定义的文件命名格式,例如: dim RndStr |
对于PHP系统来说:
代码如下 | 复制代码 |
打开fckeditoreditoreditorfilemanagerconnectorsphpcommands.php 找到: 在该句前面加入: // 初始化种子 |
(5)FCKEditor在程序中引用方式。
对于ASP系统来说:
需要包含下面的头文件
<!--#incl? file="fckeditor/fckeditor.asp"-->
在编辑器所在的位置添加如下代码:
代码如下 | 复制代码 |
<% oFCKeditor.ToolbarSet="Default" oFCKeditor.Val = "" 设置默认值 |
对于PHP来说:
在编辑器所在的位置添加如下代码:
代码如下 | 复制代码 |
<?php $oFCKeditor->ToolbarSet ="Default"; $oFCKeditor->Val=""; // 设置默认值 |
(6)获取FCKEditor中的数据。
对于服务器端脚本程序来说,将"编辑器的id"当做input标签的name属性值来获取即可,例如:
在ASP中reqst("shangpin_description"),在PHP中$_REQST["shangpin_description"]
JS中用FCKeditorAPI.GetInstance(shangpin_description).GetXHTML(tr)得到shangpin_description对应的值
ckEditor的ASP配置
在网上找了好久终于找到了!O(∩_∩)O哈哈~
一、使用方法:
1、在页面<head>中引入ckeditor核心文件ckeditor.js
代码如下 | 复制代码 |
<script type="text/javascript" src="ckeditor/ckeditor.js"></script> |
2、在使用编辑器的地方插入HTML控件<textarea>
代码如下 | 复制代码 |
<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea> |
如果是ASP.NET环境,也可用服务器端控件<TextBox>
代码如下 | 复制代码 |
<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox> |
注意在控件中加上 class="ckeditor" 。
3、将相应的控件替换成编辑器代码
代码如下 | 复制代码 |
<script type="text/javascript"> |
4、配置编辑器
ckeditor的配置都集中在 ckeditor/config.js 文件中,下面是一些常用的配置参数:
代码如下 | 复制代码 |
// 界面语言,默认为 'en' config.language = 'zh-cn'; // 设置宽高 config.width = 400; config.height = 400; // 编辑器样式,有三种:'kama'(默认)、'office2003'、'v2' config.skin = 'v2'; // 背景颜色 config.uiColor = '#FFF'; // 工具栏(基础'Basic'、全能'Full'、自定义)plugins/易做图/plugin.js config.易做图 = 'Basic'; config.易做图 = 'Full'; |
这将配合:
代码如下 | 复制代码 |
config.易做图_Full = [ //工具栏是否可以被收缩 //工具栏的位置 //工具栏默认是否展开 // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js //改变大小的最大高度 config.resize_maxHeight = 3000; //改变大小的最大宽度 //改变大小的最小高度 //改变大小的最小宽度 // 设置是使用绝对目录还是相对目录,为空为相对目录 // 编辑器的z-index值 //设置快捷键 [ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //文本菜单 [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销 [ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接 [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体 [ CKEDITOR.ALT + 109 /*-*/, '易做图Collapse' ] //设置快捷键 可能与浏览器快捷键冲突 plugins/keystrokes/plugin.js. //设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js. //设置前景色的取值 plugins/colorbutton/plugin.js 006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE, A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5, FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF' //是否在选择颜色时显示“其它颜色”选项 plugins/colorbutton/plugin.js //区块的前景色默认值设置 plugins/colorbutton/plugin.js //所需要添加的CSS文件 在此添加 可使用相对路径和网站的绝对路径 //文字方向 //CKeditor的配置文件 若不想配置 留空即可 //界面编辑框的背景色 plugins/dialog/plugin.js //背景的不透明度 数值应该在:0.0~1.0 之间 plugins/dialog/plugin.js //移动或者改变元素时 边框的吸附距离 单位:像素 plugins/dialog/plugin.js //是否拒绝本地拼写检查和提示 默认为拒绝 目前仅firefox和safari支持 plugins/wysiwygarea/plugin.js. //进行表格编辑功能 如:添加行或列 目前仅firefox支持 plugins/wysiwygarea/plugin.js //是否开启 图片和表格 的改变大小的功能 config.disableObjectResizing = true; //设置HTML文档类型 //是否对编辑区域进行渲染 plugins/editingblock/plugin.js //编辑器中回车产生的标签 //是否使用HTML实体进行输出 plugins/entities/plugin.js //定义更多的实体 plugins/entities/plugin.js //是否转换一些难以显示的字符为相应的HTML字符 plugins/entities/plugin.js //是否转换一些拉丁字符为HTML plugins/entities/plugin.js //是否转换一些特殊字符为ASCII字符 如"This is Chinese: 汉语."转换为"This is Chinese: 汉语." plugins/entities/plugin.js //添加新组件 //使用搜索时的高亮色 plugins/find/plugin.js //默认的字体名 plugins/font/plugin.js //字体编辑时的字符集 可以添加常用的中文字符:宋体、楷体、黑体等 plugins/font/plugin.js //文字的默认式样 plugins/font/plugin.js //字体默认大小 plugins/font/plugin.js //字体编辑时可选的字体大小 plugins/font/plugin.js //设置字体大小时 使用的式样 plugins/font/plugin.js //是否强制复制来的内容去除格式 plugins/pastetext/plugin.js //是否强制用“&”来代替“&”plugins/htmldataprocessor/plugin.js //对address标签进行格式化 plugins/format/plugin.js //对DIV标签自动进行格式化 plugins/format/plugin.js //对H1标签自动进行格式化 plugins/format/plugin.js //对H2标签自动进行格式化 plugins/format/plugin.js //对H3标签自动进行格式化 plugins/format/plugin.js //对H4标签自动进行格式化 plugins/format/plugin.js //对H5标签自动进行格式化 plugins/format/plugin.js //对H6标签自动进行格式化 plugins/format/plugin.js //对P标签自动进行格式化 plugins/format/plugin.js //对PRE标签自动进行格式化 plugins/format/plugin.js //用分号分隔的标签名字 在工具栏上显示 plugins/format/plugin.js //是否使用完整的html编辑模式 如使用,其源码将包含:<html><body></body></html>等标签 //是否忽略段落中的空字符 若不忽略 则字符将以“”表示 plugins/wysiwygarea/plugin.js //在清除图片属性框中的链接属性时 是否同时清除两边的<a>标签 plugins/image/plugin.js //一组用逗号分隔的标签名称,显示在左下角的层次嵌套中 plugins/menu/plugin.js. //显示子菜单时的延迟,单位:ms plugins/menu/plugin.js //当执行“新建”命令时,编辑器中的内容 plugins/newpage/plugin.js //当从word里复制文字进来时,是否进行文字的格式化去除 plugins/pastefromword/plugin.js //是否使用<h1><h2>等标签修饰或者代替从word文档中粘贴过来的内容 plugins/pastefromword/plugin.js //从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js //对应后台语言的类型来对输出的HTML内容进行格式化,默认为空 //当输入:shift+Enter时插入的标签 //可选的表情替代字符 plugins/smiley/plugin.js. //对应的表情图片 plugins/smiley/plugin.js //表情的地址 plugins/smiley/plugin.js //页面载入时,编辑框是否立即获得焦点 plugins/editingblock/plugin.js plugins/editingblock/plugin.js. //载入时,以何种方式编辑 源码和所见即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js. //载入时,是否显示框体的边框 plugins/showblocks/plugin.js //是否载入样式文件 plugins/stylescombo/plugin.js. //起始的索引值 //当用户键入TAB时,编辑器走过的空格数,( ) 当值为0时,焦点将移出编辑框 plugins/tab/plugin.js //默认使用的模板 plugins/templates/plugin.js. //用逗号分隔的模板文件plugins/templates/plugin.js. //当使用模板时,“编辑内容将被替换”框是否选中 plugins/templates/plugin.js //主题 //撤销的记录步数 plugins/undo/plugin.js // 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。 |
安装及配置方法:
一、打开文件夹发现有许多文件对于ASP来说是用不到的;删除FCKEditor2.6.6中不必要的文件:解压缩FCKeditor_2.6.6.zip到你网站根目录 fckeditor文件夹中,同时把文件夹内带_的文件夹和文件一并删除:
1.fckeditor目录下除editor目录、fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml、fcktemplates.xml 这几个保留,其余的可全部删除
2.editorfilemanagerconnectors目录中除asp目录外其余全部删除
3.editorlang目录中除en.js、zh.js 、zh-cn.js外全部删除,这里是设置语言的,如果想保留可保留
4.删除_samples目录,这里是一些示例文件,想看的可以留下。
以上则是一些精简工作,想了解更多,可在网上查阅更多资料。
二、调取fckeditor.asp。如:<!--#include file="../fckeditor/fckeditor.asp" -->
在表单里放内容的地方把<textarea name=""></textarea> 改成如下代码:
代码如下 | 复制代码 |
<% oFCKeditor.Value = "" //这个是给编辑器初始值 %> |
(给新手的一些建议,可少走弯路。这里一定要把<textarea></textarea>删掉,不要用隐藏域,要不然发表文章的时候会依次提交两次,在段末会出现”逗号“)
oFCKeditor.Create "content" 这里的content是可以由你自己定的,相当于是<textarea name=""></textarea>里面的name。
oFCKeditor.Value = "" 这里就如上说的是定义编辑器的初始值,在你修改文章时这里会用到。
到这,你的fckeditor的安装工作就完成,你可以完成发布文章的功能了。是不是很简单呀
PS:调取的方法还可以用JS的方法,相关的内容可在网上查到,在这里我就不细说了。
三、经过上面的步骤,我们完成了一些基本的功能,但是你会发现上传图片功能不管用。不要急,下面将会说到。
在fckeditor 2.6.6版本中不在是默认的asp了,变成PHP了(PS:程序方面我很菜的,也只能用用asp的了)。
慢慢来,打开fckconfig.js
找到FCKConfig.DefaultLanguage,他默认的是en,我们把他换成zh-cn,并把相应的FCKConfig.AutoDetectLanguage = true ;里的true改成false;这个就是语言检索功能,如果不改语言的话给他默认的也行的。
找到var _FileBrowserLanguage = 'asp' ;
var _QuickUploadLanguage = 'asp' ;
默认的是PHP的,改成ASP
这个文件还些地方看个人的喜好修改:
找到FCKConfig.FontNames,在后面你可以加上一些中文的字体。
找到FCKConfig.ToolbarSets["Default"],这个是编辑器上的工具,下面的内容就是一些工具,你可以做一些相应的修改,哪些用不到的就可以撤了。比如:
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],这一长串就是定义黑体,斜体啊那些的,如果你这些都不想要了你就把这一长串代码删了,如果想留下个黑体你就把除‘Bold'外的全部删掉。
这个文件改得差不多了,下面是上传路径的修改:
打开FCKeditoreditorfilemanagerconnectorsaspconfig.asp这个文件
找到ConfigIsEnabled = false,把false改成true;
找到ConfigUserFilesPath = "/userfiles/"这里的userfiles是默认的文件存放路径,你也可以改成其他的文件名,注意这个文件你必须在你的网站中建立。
扩展:如果你想使自己的上传的图片按时间分类的话你可以改成:ConfigUserFilesPath = "/userfiles/"&year(now())&"/"&right("0"&month(now()),2)&"/"&right("0"&day(now()),2)&"/"
好了,这个文件也OK了
下面我们对上传的图片做下限制:
打开FCKeditoreditorfilemanagerconnectorsaspcommand.asp这个文件
找到oUploader.MaxSize = 0”这句改成“oUploader.MaxSize = 0.3*1024*1024”其中的0.3的单位时M,限制图片的大小为0.3M
打开FCKeditoreditordialogfck_imagefck_image.js这个文件
找到
代码如下 | 复制代码 |
GetE('txtWidth').value = oImageOriginal.width ; GetE('txtHeight').value = oImageOriginal.height ; |
改成
代码如下 | 复制代码 |
if(oImageOriginal.width<630){ GetE('txtWidth').value = oImageOriginal.width ; GetE('txtHeight').value = oImageOriginal.height ; }else{ GetE('txtWidth').value = 630; GetE('txtHeight').value = 630* oImageOriginal.height/oImageOriginal.width ; } |
补充:asp教程,高级应用