澳门新浦京8455com(转)FCKeditor在ASP环境中配置使用

FCKeditor是今后极其流行的开源编辑器,SyntaxHighlighter是三个用JS达成的代码高亮显示插件,能够最小化纠正您的程序完结效果,最后效果截图:演示网页:下载FCKeditor
+
SyntaxHighlighter插件包:fck_SyntaxHighlighter脚本之家打包版上面分步介绍怎么样在FCKeditor情形中应用SyntaxHighlighter。后台FCKeditor编辑器的修改

王国编辑器(FCK)暗中同意是未曾加塞儿代码这一效应的,所以日常在增进代码的时候习于旧贯用引用这几个职能,可是,那也太不专门的学业了吗?那咋整?就给FCK加三个插件呗。下边就是很盛名的SyntaxHighlighter了。

先说一下笔者的测量试验遇到:XPSP2,IIS5.1,FCKeditor2.0

1、将包解压后,把 insertcode 文件夹上流传
FCKeditor编辑器的editor/plugins/目录下,然后修正FCKeditor编辑器的fckconfig.js此文件,在这文件中
FCKConfig.PluginsPath = FCKConfig.BasePath + ‘plugins/’
;上面步向以下代码: FCKConfig.Plugins.Add(‘insertcode’State of Qatar;

率先大家能够去官网下载最新版,然而下载下来并非就能够用,还要进行部布满局,对新手来讲是相比有难度的。这里可以直接采取恨雪提供的早就安插好的本子(2.1.382版本),本学科也是依赖该版本而张开。

  在IIS上确立二个新的站点,作者一贯取名字为FCKeditor

2、展开FCKeditor编辑器的editor/lang文件夹里的zh-cn.js,在DlgDivInlineStyle
: “CSS 样式”,上面走入以下代码//PluginsInsertCodeBtn : “插入代码”

 下载地址:

  在DW里创设四个相呼应的站点,测量检验服务器为本机,扶植VBScript

澳门新浦京8455com,3、校正FCKeditor编辑器的fckconfig.js文件,在编辑器调整面板中投入按键,在调用工具栏参数的Media前边参与insertcode。如下所示:FCKConfig.**Sets[
“standard”] =
[[‘Source’,’Paste’,’PasteText’,’PasteWord’,’-‘,’Undo’,’Redo’,’-‘,’Bold’,’Italic’,’Underline’,’StrikeThrough’,’TextColor’,’Table’,’-‘,’JustifyLeft’,’JustifyCenter’,’JustifyRight’,’OrderedList’,’UnorderedList’,’-‘,’Image’,’Attach’,’Flash’,’Media’,’InsertCode’],完结以上操作后,当时起步FCKeditor编辑器应该在编辑器的**上多了叁个Logo,点击此Logo就能够增添你的代码了。假若报错,提醒找不到工具项,那是FCKeditor的缓存没衰亡,退出后台或更新缓存,刷新一下,重新进入就足以见到代码插入Logo了。前台呈现页面包车型客车SyntaxHighlighter调用

下载解压后是五个文本夹:

  下载FCKeditor2.0,这些东西是开源的,网络能下到的地点重重,自个儿找去……

1、将包解压后把 syntax 文件夹上盛传前台根目录下的js文件夹中。

澳门新浦京8455com 1

  下载下来的应该是压缩包,解压到FCKeditor站点根目录,什么都无需退换,直接就能够起先调用了。等您会了的时候,会发掘简单得要死去!

2、在急需张开高亮彰显管理的HTML页面中扩张SyntaxHighlighter调控代码,将如下代码,插入到HTML页面包车型地铁header与/header之间:

第一,上传SyntaxHighlighter2.1.382这些文件夹到网址根目录,也许别的你赏识的地点,也得以重命名该文件夹,不过在前面模板文件中调用CSS和js的时候路线要对,这里笔者就传出根目录吧。

  在站点根目录下,新建三个index.asp页面,段内加如下代码(调用编辑器State of Qatar:

script type="text/javascript" src="/js/syntax/scripts/shCore.js"/scriptscript type="text/javascript" src="/js/syntax/scripts/shLegacy.js"/script script type="text/javascript" src="/js/syntax/scripts/shBrushAll.js"/scriptlink href="/js/syntax/styles/shCore.css" type="text/css" rel="stylesheet"/link href="/js/syntax/styles/shThemeDefault.css" type="text/css" rel="stylesheet"/script type="text/javascript"SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';SyntaxHighlighter.all();/script

第二,把以下代码加到内容模板,这里就要注意第一步了。

<% 
Dim oFCKeditor
 Set oFCKeditor = New FCKeditor
 oFCKeditor.BasePath = "/FCKeditor/"  //设置编辑器的路径,我站点根目录下的一个目录
 oFCKeditor.ToolbarSet = "Default"
 oFCKeditor.Width = "100%"
 oFCKeditor.Height = "600"
 oFCKeditor.Value = "" //这个是给编辑器初始值
 oFCKeditor.Create "logbody" //以后编辑器里的内容都是由这个logbody取得,命名由你定
 %>

font face=”Courier New”
2、在前台页的CSS文件中追加如下样式调节CSS代码:/font

复制代码代码如下:

  Dim oFCKeditor

.codeHead {font-weight: bold;font-size: 12px;padding: 5px;padding-left: 15px;background: #fff;border-bottom: 1px solid #ddd;}.codeText {border: 1px solid #ddd;width: 98%;overflow: auto;margin: 0 0 1.1em;padding: 0;word-break: break-all;background: #fff;font: 12px 'Courier New', Monospace;}.codeText ol {list-style: decimal-leading-zero;margin: 0 1px 0 45px;padding: 5px 0;color: #5C5C5C;border-left: 1px solid #ddd;background: #fff;}.codeText ol li {list-style-type:decimal;padding-left: 10px;background: #FFF;}.codeText ol li.alt {background: #FFF;}.codeText ol li span {color: #000;}

值得一说的是,上边包车型大巴那几个shBrushSql.js之类的JS,并非一向要调用那些的。这一个JS都有其意义(brushes),可以看官方的文档。因为自己相比较常常用到css、html、php、sql,所以自个儿就只写下边所示的js就能够。当然,假设您愿意,你能够把一切的都调用上去。可是那样会超级慢哦。但是,假若你未曾调用php的,当你在插入代码的时候,语言采用php,那么在前台,会提示错误。(shCore.js绝对要有,不然前台会未有作用)

  Set oFCKeditor = New FCKeditor

留心:这样的前台调用路线为 /js/syntax/
是因为本人上传到了那几个路子,此路线依据你的须求可订正。应该为你其实传的路子。

第三,把“syntaxhighlight2”这些文件夹传到“e/admin/ecmseditor/infoeditor/editor/plugins”目录下,也正是说,那是FCK编辑器的三个插件。

  oFCKeditor.BasePath = “/FCKeditor/”
//设置编辑器的路子,小编站点根目录下的叁个索引

迄今订正总体截止,假诺您在退换中遇到什么难点,迎接与大家沟通,tech#cncms.com

第四,校勘一下FCK编辑器的配置文件,须求编辑器增多一下插件和按键。

  oFCKeditor.ToolbarSet = “Default”

增加补充:有朋友反映加载时页面会卡一下才具显示完,原因是在页面加载时JS即先导运转,进行代码的着色,消除办法就是,让代码着色
SyntaxHighlighter.all(); 延时举办就可以,大家把地方的代码稍改一下:

1,后台配置文件路线:/e/admin/ecmseditor/infoeditor/fckconfig.js

  oFCKeditor.Width = “100%”

script type="text/javascript"SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';SyntaxHighlighter.all();/script

2,前台配置文件路径:/e/data/ecmseditor/infoeditor/fckconfig.js

  oFCKeditor.Height = “600”

改为:

找到FCKConfig.PluginsPath = FCKConfig.BasePath + ‘plugins/’ ;     
大概在51行

  oFCKeditor.Value = “” //那几个是给编写制定器开首值

script type="text/javascript"SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';setTimeout("SyntaxHighlighter.all();",300);/script

在上面插入

  oFCKeditor.Create “logbody”
//未来编辑器里的内容都以由那么些logbody得到,命名由你定

那样改后,就感觉不到加载时的卡了。

复制代码代码如下:
FCKConfig.Plugins.Add(‘syntaxhighlight2′,’zh-cn’);
// default language options:
c++,csharp,css,delphi,java,jscript,php,python,ruby,sql,vb,xhtml
FCKConfig.SyntaxHighlight2LangDefault =’c++’;

  %>

然后找到’InsertTBr’],在  ‘InsertTBr’  后面输入   ,’SyntaxHighLight2’。

  加了这一段别忘了在index.asp前边第二行加上

如此就终于马到功成了,编辑器的分界面差超少如下:

  <!–#include file=”FCKeditor/fckeditor.asp” –>

澳门新浦京8455com 2

  把fckeditor.asp包罗进来。切记切记!

前台效果大约如下:

  就像此轻便!

澳门新浦京8455com 3

  将来你一旦把这一个编辑器当成一个控件来接收,提取它的多少时用:request(“logbody”卡塔尔

  今后松口气吧。测量试验成功了。里面有个别设置,去网络找些高端的运用表明来看呢。

      FCKeditor使用起来

  以下内容为原创,如需转载,请注明出处为 作者:柠檬园主

  FCKeditor
2.0版终于出来了,之所以用“终于”那些词,是因为在这一本子上加多了货真价实的FLASH插入成效。能够说在具有的在线编辑器中,FCKeditor是时下网络络最棒的编辑器,效能强大,协理多种浏览器,无平台约束,能够和各样WEB语言融入,多语言帮衬,开源等~~

  对于二个全新的网址,FCKeditor就可以直接拿过来用了,没有须要张开怎么样纠正。可是对于超级多的本来就有网址来说,FCKeditor的有些装置并不相符自个儿的利用,那篇文章意在告诉您轻巧的更动FCKeditor以便于你的网址的施用。

  第一项专门的学问便是对那几个效果宏大的编辑器举办轻松,当然是文本精短而非功效精练化。在那处本身以asp版的FCKeditor为例实行,步入到FCKeditor
2.0文书夹下,先把以“_”为发端的文本夹统统删除,这个文件夹里放的是范例或是一些其他工具。其实相当于只保留editor文件夹、fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了,最外层的精短化达成,步入到editor文件夹内,先把“_source”文件夹删除,这里是局地源文件,对于使用的话没什么用场。

  踏入images文件夹,删除smiley文件夹,些文件是放表情Logo的,由于接下去作者会用自己要好的神色Logo,先把她们的删除,当然,倘若您想用这里的神采Logo那就绝不删掉了。退出
images再进来lang文件夹内,这里的事物能够来个大清洗了,只保留fcklanguagemanager.js、zh-cn.js、en.js、zh.js那多个文本,第三个公文是语言配置文件,有了它工夫和fckconfig.js里的设置成对对应上相应的语言文件,zh-cn.js是简体汉语语言包,en.js就不用说了啊,zh.js是繁体中文的。怎样?一下子少了几百K,爽吧~

  再退出lang文件夹,步向skin文件夹,借让你想行使fckeditor私下认可的这种奶豆青,那就把除了default文件夹外的另三个公文夹直接删除,要是想用其他,那就融洽思索了,然则笔者给你个建议,假诺不想用私下认可的,那就选那多少个silver,因为赤褐也正是中蓝和其余颜色配起来都不会难看,而卓殊office2001的肌肤,反正作者是相当不赏识的,并且图片相对也超级大,又追加了下载时间,不要!

  从简的尾声一步,退出skin文件夹,再步入filemanager,即便您用的不是新型版的fckeditor的话,那这里就三个文件夹browser,新版的还可能有三个upload文件夹。贰个个来,先走入到filemanager/browser/default/connectors/下,因为作者是用的asp的,所以除asp文件夹外,全体刨除。然后再步向filemanager/upload/下,同样,只留asp文件夹,至此,编辑器的精短化已经完成了,接下去,我们对编辑器举办设置改过。

      第七个修正的文本,也便是fckeditor总布局文件,坐落于根目录下的fckconfig.js文件。请依据上面的列表实行(以fckeditor
2.0版的为准State of Qatar:

  找到第20行 FCKConfig.DefaultLanguage = ‘en’ ;改为
FCKConfig.DefaultLanguage = ‘zh-cn’ ;设置暗许语言为简体中文

  找到第40行 FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ;
即在编写制定器域内能够接收Tab键。

  假若您的编辑器还用在网址前台的话,比如说用于留言本或是日记回复时,那就只可以思忖安全了,在前台千万不要采纳Default的toolbar,要么自定义一下效用,要么就用系统已经定义好的Basic,也等于着力的toolbar,

  找到第64行 FCKConfig.ToolbarSets[“Basic”] = [

  [‘Bold’,’Italic’,’-‘,’OrderedList’,’UnorderedList’,’-‘,/*’Link’,*/’Unlink’,’-‘,’Style’,’FontSize’,’TextColor’,’BGColor’,’-‘,’Smiley’,’SpecialChar’,’Replace’,’Preview’]

  ] ;

  这是自个儿改善的Basic,把图像作用去掉,把增多链接作用去掉,因为图像和链接和flash和图像按键增加效果都能让前台页直接访问和上传文件,若是那儿不改直接给您上传个木马还不如时玩完?但是光那样还特别,fckeditor还扶植编辑域内的鼠标右键功效。

  找到第73行

  FCKConfig.ContextMenu =
[‘Generic’,/*’Link’,*/’Anchor’,/*’Image’,*/’Flash’,’Select’,’Textarea’,’Checkbox’,’Radio’,’TextField’,’HiddenField’,/*’ImageButton’,*/’Button’,’BulletedList’,’NumberedList’,’TableCell’,’Table’,’Form’]
;

  那也是自家校勘的把鼠标右键的“链接、图像,FLASH,图像开关”作用都去掉。

  找到 第77行 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’ ;

  接下去就安装上传功用了,依然以ASP为例,其实fck私下认可的就是asp的,把100行以下的装有被解说掉的代码全部删掉就能够,然后再把下部全数有关于browser.html和upload.asp的背后的?Type=XX都改成Type=YY,此中YY为您想保留文件的文本夹名称。

  而只要你还想用本身的神色图标的话,那跳到131行,改掉那么些表情图标的文本夹地址,以致下边包车型地铁神采Logo的公文名,再上面这两个数字是每行呈现表情数及弹出窗口的宽和高了,这些的朗朗上口要基于你的神色Logo排列的窗口的大大小小而定了。OK,总架构文件更改实现。

      接下去是编辑器地方的安装,作者的习贯是把editor放在根目录下,最起首所述的三个公文也放在根目录下(Tips:建议坐落根目录下,並且提出采纳时设置路线也运用相对路线,如”/fckeditor/”,而笔者的习贯的设置是”/”卡塔尔(قطر‎,那样方便fckeditor的修正进步,何况网站下有所文件夹都足以Infiniti定调用,空中楼阁别的文件夹名变了而其他地方就不能够运用编辑器的标题。

  打开fckeditor.asp文件,找到 sBasePath = “/fckeditor/”改为 sBasePath
= “/”

  打开fckeditor.js文件,找到 this.BasePath = ‘/fckeditor/’ ;改为
this.BasePath = ‘/’ ;

  编辑器域内暗中认可的展示字体为12px,而自己的主页暗许字体为14px,所以瞧着就十分不舒服,想要改过能够透过改进样式表来到达须求,展开/editor/css/fck_editorarea.css,把第4行改为
font-size: 14px;即可。

  接下去正是上传文件的设置了,这几个比较费心,请细心操作。

  打开editorfilemanagerbrowserdefaultfrmresourcetype.html,找到第15行,插入“
[‘uploadfile’,’uploadfile’],”合作上刚刚在fckconfig.js里的设置,那么作者的上传文件路径正是/uploadfile,当然你也得以改成你想要的公文夹,但此处的名号必须要和fckconfig.js里的百般“Type=YY”里的YY一致才行。

  尚未完,继续走入到editorfilemanagerbrowserdefaultconnectorsasp,张开config.asp,先把ConfigIsEnabled
= False改成为ConfigIsEnabled =
True,要不是无法上传文件的,再把ConfigUserFilesPath =
“/UserFile”改成自身想要的ConfigUserFilesPath = “/”。

  接着在“Set ConfigDeniedExtensions = CreateObject(
“Scripting.Dictionary” 卡塔尔”前边参加ConfigAllowedExtensions.Add
“uploadfile”, “”

  ConfigDeniedExtensions.Add “uploadfile”, “”

  同理,这里的安装也是要和方面以至fckconfig.js里面临应的。

  还会有多少个上传,就是高速上传,这一个职能是在fckeditor
2.0里才有的,从前的本子没那一个效果。步入editorfilemanageruploadasp,同样展开config.asp,也如同一口的把ConfigIsEnabled
= False 设置成 ConfigIsEnabled = True,作者这里把ConfigUserFilesPath =
“/UserFiles/”改成自个儿想要的 ConfigUserFilesPath = “/uploadfile/”&
Year(Date(卡塔尔(قطر‎卡塔尔 &”-“& Month(Date(卡塔尔(قطر‎卡塔尔国&”/”,因为作者的上传文件是献身uploadfile文件夹下,并且是按月分别放置的。急忙上传,不会让您选择文件夹,而是通过这里的设置直接上传的,那儿设置假使和后边的装置合营倒霉的话,你的文书就可以被上传得倒三颠四,特别不方便管理。接前重新前二个config.asp里的操作,在末端加上

  ConfigAllowedExtensions.Add “uploadfile”, “”

  ConfigDeniedExtensions.Add “uploadfile”, “”

      

接下去呢,就讲一下怎么着创造和睦的在线编辑器,这里以ASP和JS版的为例,ASP版示例代码,平日用于后台操作:

 <%
 Dim oFCKeditor
 Set oFCKeditor = New FCKeditor
 oFCKeditor.BasePath = "/" 
 oFCKeditor.ToolbarSet = "Default"
 oFCKeditor.Width = "100%"
 oFCKeditor.Height = "400"
 oFCKeditor.Value = rs("logbody")
 oFCKeditor.Create "logbody"
 %>

  Dim oFCKeditor

  Set oFCKeditor = New FCKeditor

  oFCKeditor.BasePath = “/”

  oFCKeditor.ToolbarSet = “Default”

  oFCKeditor.Width = “100%”

  oFCKeditor.Height = “400”

  oFCKeditor.Value = rs(“logbody”)

  oFCKeditor.Create “logbody”

  %>

  ASP版的,当然只可以用在以.asp为扩充名的页面中,要是你在前在fckedito.asp里设置过BasePath为”/”的话,这里就足以省去第三行,ASP版的唯有三个Create函数。建议在改动一篇内容时用ASP版的。

  接下去看JS版的:

 <script type="text/javascript">
 var oFCKeditor = new FCKeditor( ‘logbody’ ) ;
 oFCKeditor.BasePath = ‘/’ ;
 oFCKeditor.ToolbarSet = ‘Basic’ ;
 oFCKeditor.Width = ‘100%’ ;
 oFCKeditor.Height = ‘400’ ;
 oFCKeditor.Value = ” ;
 oFCKeditor.Create() ;
 </script>

  

  BasePath的安装同上所述,JS版的可用于其余网页中,以致用于html页面,因为其是客商端生成的,这样的平价即是一可以减小网络流量,因为编辑器文件只需下载叁回,二是能够由客商端定义几时显得,由于fckeditor开首化供给自然时间,在此一点上JS就很有意义了。

  其余,JS版的还应该有一个作用函数正是ReplaceTextarea(卡塔尔函数,能够轮流钦定的TextArea,拿笔者的网址的日记的复苏部分示例:

     <script type="text/javascript">
     <!–
     function showFCK(){
     var oFCKeditor = new FCKeditor( ‘fbContent’ ) ;
     oFCKeditor.BasePath = ‘/’ ;
     oFCKeditor.ToolbarSet = ‘Basic’ ;
     oFCKeditor.Width = ‘100%’ ;
     oFCKeditor.Height = ‘200’ ;
     oFCKeditor.Value = ” ;
     //oFCKeditor.Create() ;
     oFCKeditor.ReplaceTextarea() ;
     //document.blog_feedback.blogsubmit.disabled = ”;
     document.blog_feedback.blogsubmit.style.display = ”;
     document.blog_feedback.openFCK.disabled = ‘true’;
     document.blog_feedback.openFCK.style.display = ‘none’;
     }
     //–>
     </script>

  把其写成五个轻便的函数,当顾客显示张开编辑器时才生成这几个fckeditor,不用每回刷新页面都去起初化一个编辑器,页面包车型地铁快慢就能够快多了。

  补遗:前面讲到了,说是在编写本来就有数据内容时不用用JS版的,这是因为单引号(‘卡塔尔国的标题形成的,在数量内容里难免会有单引号存在而用JS版生成编辑器时可能就能够因为单引号问题,而使编辑器不恐怕符合规律生成,而采纳asp则不相同,用ASP版本的是因为数量被当成是多个变量了,然后直接赋值给编写制定器域。还应该有就是唯有您要用ReplaceTextArea(卡塔尔方法来变化编辑器,不然你不需先写三个<textarea>那样的价签,一切都会由fckeditor自动生成的,你所需做的只是给fckeditor内定几个实例名。同一时间你也不用忧郁什么提交,在表单提交的时候,fckeditor会自动提交,提交的变量名是以你钦点的fckeditor实例命名的。

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图