第四团队—Team 4-FCKEditor 添加自定义按钮

FCKEditor 添加自定义按钮

FCKeditor添加自定义按钮 FCKeditor用法详解下一篇日志

Pillys, 发表于:2008-10-03 16:06:57, 分类:Programmer 浏览( ) 评论( ) 收藏这篇日志

最近一个项目的信息发布模块使用的是FCKEditor文本编辑器。为保证界面美观，我们选择把上传图片和附件的功能放在FCKEditor的按钮中。网上找了一下自定义按钮的方法，在这总结一下我所用到的，希望大家指点。

以添加上传附件按钮为例：

1.在fckconfig.js中添的FCKConfig.ToolbarSets["Default"]添加'InsertFile'，这是在Default模式下的工具栏显示的按钮。如需要可添加到其他模式下。

2.在editor/lang/zh-cn.js文件最后添加InsertFile : "附件"

3.在editor/js/fckeditorcode_ie.js文件中查找InsertHorizontalRule，在|后添加InsertFile

4.还在此文件中查找default:if (FCKRegexLib，在其前边添加

case 'InsertFile':B=new FCKDialogCommand('InsertFile',FCKLang.InsertFile,'dialog/InsertFile/InsertFile.aspx',510,450);break;

第3个参数为打开窗口的相对路径

5.还在此文件中查找default:alert(FCKLang.UnknownToolbarItem 在其前面添加

case 'InsertFile':B = new FCKToolbarButton('InsertFile',FCKLang.InsertFile,FCKLang.InsertFile,FCK_TOOLBARITEM_ICONTEXT,false,true,4);break;

FCK_TOOLBARITEM_ICONTEXT参数使此按钮为文字和图片同时显示，最后一个参数为使用第几个图片图片，图片的路径为editor\skins\default\fck_strip.gif

这样工具栏上就多了一个添加附件的按钮

======================================================================================

FCKeditor是一款功能强大的开源在线文本编辑器,刚刚推出的 FCKEditor 2.5 支持IE、Firefox、safari、Oper、Netscape、Camino等等主流浏览器，支持Windows、Mac、Linux平台，支持ASP.Net、ASP、ColdFusion 、PHP 、Java 、 Active-FoxPro、Lasso 、Perl 、Python等语言，生成的代码完全符合XHTML 1.0标准。

其配置方法可参见：http://www.xianfen.net/Article7.aspx

本文讨论 asp.net FCKEditor 中添加"插入代码"工具栏。代码高亮组件用的是免费的 ActiproSoftware.CodeHighlighter ，该组件支持多种语言代码的着色。

(一).添加自定义工具栏

涉及到三组文件：

1.fckeditor\editor\lang下的文件(这是界面多语言支持的文件夹，在此只修改英文和简体中文支持的.js文件)

en.js:

zh-cn.js:

2.fckeditor\editor\js下的文件(这是多浏览器支持的文件夹，FCKEditor 核心代码。为了减少大小，该文件夹的文件已被压缩，未被压缩的文件在"fckeditor\editor\_source"中。

fckeditorcode_gecko.js:提供"类火狐"等浏览器支持。

fckeditorcode_ie.js:提供"类IE"等浏览器支持。

以上文件共要改两处：

(1).在以上文件中查找"default:if (FCKRegexLib"，在default 前插入"case 'InsertCode':B = new FCKDialogCommand('InsertCode' ,FCKLang.InsertCode ,'dialog/InsertCode/InsertCode.aspx',700,600);break"

FCKDialogCommand()方法：

参数1,2:按钮名称，跟前面语言支持文件中定义的对应

参数3:点击该按钮后显示的文件

参数4,5:弹出窗口的宽和高

(2).继续查找"default:alert(FCKLang.UnknownToolbarItem"，在"default"前插入"case 'InsertCode':B = new FCKToolbarButton,'InsertCode', FCKLang.InsertCode,null,null,null,null,69);break;"

最后的参数是工具栏图标的索引(FCKEditor版本不同，索引不同)，图标文件fckeditor\editor\skins\office2003\fck_strip.gif,在图片的最后增加一个16*16的图标。索引计算方法是：该图片高度除16即得到最后一个图标索引号。

3.fckeditor\fckconfig.js

(二).制作InsertCode.aspx 文件(fckeditor\editor\dialog\InsertCode\InsertCode.aspx)

<%@ Page Language="C#" %>

<%@ Register TagPrefix="CH" Namespace="ActiproSoftware.CodeHighlighter" Assembly="ActiproSoftware.CodeHighlighter.Net20" %>

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

static string code = string.Empty;

protected void btnSubmit_Click(object sender, EventArgs e)

{

code = txtCode.Text;

Highlighter.LanguageKey = ddlLangType.SelectedItem.Text;

Highlighter.OutliningEnabled = chkOutLining.Checked;

Highlighter.LineNumberMarginVisible = chkLineNum.Checked;

Highlighter.Text = code;

}

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

CodeHighlighterConfiguration config = ConfigurationManager.GetSection("codeHighlighter") as CodeHighlighterConfiguration;

string[] keys = new string[config.LanguageConfigs.Keys.Count];

config.LanguageConfigs.Keys.CopyTo(keys, 0);

Array.Sort(keys);

foreach (string key in keys)

{

ddlLangType.Items.Add(key);

}

ddlLangType.SelectedIndex = ddlLangType.Items.IndexOf(ddlLangType.Items.FindByText("C#"));

}

protected void Highlighter_PostRender(object sender, EventArgs e)

{

if(Highlighter.Output != null)

{

lblCode.Text = "<pre>" + Highlighter.Output.Replace("\n", "<br />") + "</pre>"; //FCKEditor 2.5 版本以下，在<pre>标记中的换行由设计视图转化为代码视图时有时会失效，因此将换行符换成<br />

//或者换成Highlighter.Output.Replace(" ", "  ").Replace("\n", "<br />") 把回车换成<br /> 双空格换成  

Response.Write("<scr" + "ipt>window.parent.SetOkButton( true );</scr" + "ipt>"); //返回成功，显示"确定"按钮

}

</script>

<title>插入代码--飘遥的BLOG</title>

var oEditor = window.parent.InnerDialogLoaded() ;

// Gets the document DOM

var oDOM = oEditor.FCK.EditorDocument ;

var oActiveEl = oEditor.FCKSelection.GetSelectedElement() ;

window.onload = function()

{

//window.parent.SetOkButton( true );

}

function Ok()

{

if(GetE('txtCode').value == '')

{

alert("代码内容不能为空！");

return false;

}

oEditor.FCK.InsertHtml( document.getElementById("lblCode").innerHTML ) ;

return true ;

}

</script>

.langType

{

padding-bottom:5px;

}

.btnRun

{

padding-top:5px;

text-align:right;

}

PRE {

background-color: #FFFEF8;

border-style: solid;

border-width: 1px;

border-color: #C0C0C0;

font-family: Courier New, monospace;

font-size: 10pt;

}

</style>

</head>

<body>

<div>

语言类型：<asp:DropDownList ID="ddlLangType" runat="server">

</asp:DropDownList></div>

<asp:TextBox ID="txtCode" runat="server" TextMode="multiline" Width="665px" Height="390px"></asp:TextBox>

</div>

<asp:CheckBox ID="chkOutLining" Text="折叠代码" runat="server" Checked="true" />

<asp:CheckBox ID="chkLineNum" Text="允许行号" runat="server" Checked="true" />

<asp:Button ID="btnSubmit" runat="server" Text=" 转换 " OnClick="btnSubmit_Click" />

<CH:CodeHighlighter runat="server" ID="Highlighter" OnPostRender="Highlighter_PostRender" /></pre>

<asp:Label ID="lblCode" style="display:none;" runat="server"></asp:Label>

</div>

</form>

</body>

</html>

(三).配置CodeHighlighter组件

可根据CodeHighlighter文档配置，不再多说。

<?xml version="1.0"?>

</configSections>

</appSettings>

<system.web>

</system.web>

</keywordCollection>

</keywordLinking>

</languages>

</codeHighlighter>

</configuration>

如果其他语言，可参考使用 javascript 代码着色:

http://www.cnblogs.com/zss1100/archive/2007/06/17/786773.html

完整示例下载：点击下载

标签：FCKEditor 编辑器 CodeHighlighter 日期：2007-12-9 22:52:03 分类：第三方组件阅读：550 编辑

上一篇：Mono 1.2.6 发布了 | 下一篇：写UBB编辑器心得--编写浏览器兼容的 JavaScript 代码

发表评论

ffffff @ 2008-3-4 13:02:17

引用回复

HTML代码：

hhkhjkhktgu

gf @ 2008-3-20 22:01:04

引用回复

PHP代码：

<?php

/**

* 将大图片自动切割成一定比例的小图片

* 并按照一定规则给小图片命名

* 使用方法：

* 先拷贝大图片到init文件夹下命名为 1.jpg , 2.jpg .....

* 浏览器输入地址 img.php

* 生成小图片于文件夹 temp/zoom1,temp/zoom2.... 下面

* 注：需要GD2支持

* 作者：阿义

header("Cache-Control:no-cache,must-revalidate"); //不使用缓存

//要切割的图片

if (isset($_GET['flag'])) {

$flag=$_GET['flag'];

}else {

$flag=1;

}

$filename="init/".$flag.".jpg";//大图文件

$tempdir="temp/zoom".$flag;//小图存放目录

//判断文件是否存在不存在就切割完毕

if(!file_exists($filename)){

if($flag==1){

exit('<p align=center>请确认大图是否位于map/init 下并命名为 1.jpg,2.jpg.......</p>');

}else{

exit('<p align=center>图片切割完毕</p>');

}

}else{

if(!file_exists($tempdir)) mkdir($tempdir);

echo "<p align=center>正在切割第".$flag."张大图</p>";

}

/********************************************************************/

$picW=256; //切割小图的宽

$picH=256; //切割小图的高

ini_set( 'memory_limit', '220M' ); //为支持大图片增加内存限制

/********************************************************************/

//获取大图片的属性

list($width, $height, $type, $attr) = getimagesize($filename);

//从$filename创建一新图像

$image = imagecreatefromjpeg($filename);

//循环截取大图中的每一部分，生成小图

for ($i=0;$i<ceil($width/$picW);$i++){

for ($j=0;$j<ceil($height/$picH);$j++){

$im = @imagecreatetruecolor($picW, $picH) or die("Cannot Initialize new GD image stream");//创建小图像

$colBG = imagecolorallocate($im, 255, 255, 255);//白色背景

imagefill( $im, 0, 0, $colBG );//加白色背景

$picX=($picW*($i+1))<$width?$picW:($picW+$width-$picW*($i+1));//获取截取图片的宽度

$picY=($picH*($j+1))<$height?$picH:($picH+$height-$picH*($j+1));//获取截取图片的高度

imagecopy ( $im, $image, 0, 0, ($picW*$i), ($picH*$j), $picX, $picY );//拷贝大图片的一部分到小图片

imagejpeg($im,$tempdir."/".$j.",".$i.".jpg",75);//创建小图片到磁盘，输出质量为75（0~100）

}

imagedestroy($im);//释放与 $im 关联的内存

imagedestroy($image);//释放与 $image 关联的内存

//跳转到下一张大图

echo "<script language='JavaScript'>window.location.href='img.php?flag=".($flag+1)."'</script>";

FckEditor

正在读取日志的评论数据,请稍后……

正在加载日志评论签写框，请稍后……

BLOG 热门日志

BLOG 推荐日志

暂时没有推荐日志

BLOG 最新留言

{$SideGB}

BLOG 站内搜索

成员登录通道

正在载入成员登录通道...