FCKEditor 添加"插入代码"工具栏按钮

zoukankan html css js c++ java

FCKEditor 添加"插入代码"工具栏按钮

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">

<script runat="server">
    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>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>插入代码--飘遥的BLOG</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="noindex, nofollow" name="robots" />

    <script src="../common/fck_dialog_common.js" type="text/javascript"></script>

    <script type="text/javascript">

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>

    <style type="text/css">
    .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>
    <form id="form1" runat="server">
        <div>
            <div class="langType">
                语言类型：<asp:DropDownList ID="ddlLangType" runat="server">
                </asp:DropDownList></div>
            <div class="textCode">
                <asp:TextBox ID="txtCode" runat="server" TextMode="multiline" Width="665px" Height="390px"></asp:TextBox>
            </div>
            <div class="btnRun">
                <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" />
                <pre id="pre1" style="display: none;">
<CH:CodeHighlighter runat="server" ID="Highlighter" OnPostRender="Highlighter_PostRender" /></pre>
<asp:Label ID="lblCode" style="display:none;" runat="server"></asp:Label>
            </div>
        </div>
    </form>
</body>
</html>

(三).配置CodeHighlighter组件
可根据CodeHighlighter文档配置，不再多说。

<?xml version="1.0"?>
<configuration>
    <configSections>
        <section name="codeHighlighter" requirePermission="false" type="ActiproSoftware.CodeHighlighter.CodeHighlighterConfigurationSectionHandler, ActiproSoftware.CodeHighlighter.Net20"/>
    </configSections>
    <appSettings>
        <add key="FCKeditor:UserFilesPath" value="/Files/"/>
    </appSettings>
    <system.web>
        <pages validateRequest="false" enableEventValidation="false"/>
        <compilation debug="true"/>
    </system.web>
    <codeHighlighter>
        <cache languageTimeout="3"/>
        <keywordLinking enabled="true" target="_blank" defaultKeywordCollectionKey="ActiproKeywords">
            <keywordCollection key="ActiproKeywords">
                <explicitKeyword tokenKey="IdentifierToken" patternValue="Zxjay" url="http://www.xianfen.net" caseSensitive="false"/>
            </keywordCollection>
        </keywordLinking>
        <languages>
            <language key="Assembly" definitionPath="~/Languages/Lexers/ActiproSoftware.Assembly.xml"/>
            <language key="BatchFile" definitionPath="~/Languages/Lexers/ActiproSoftware.BatchFile.xml"/>
            <language key="C#" definitionPath="~/Languages/Lexers/ActiproSoftware.CSharp.xml"/>
            <language key="CSS" definitionPath="~/Languages/Lexers/ActiproSoftware.CSS.xml"/>
            <language key="HTML" definitionPath="~/Languages/Lexers/ActiproSoftware.HTML.xml"/>
            <language key="INIFile" definitionPath="~/Languages/Lexers/ActiproSoftware.INIFile.xml"/>
            <language key="Java" definitionPath="~/Languages/Lexers/ActiproSoftware.Java.xml"/>
            <language key="JScript" definitionPath="~/Languages/Lexers/ActiproSoftware.JScript.xml"/>
            <language key="Lua" definitionPath="~/Languages/Lexers/ActiproSoftware.Lua.xml"/>
            <language key="MSIL" definitionPath="~/Languages/Lexers/ActiproSoftware.MSIL.xml"/>
            <language key="Pascal" definitionPath="~/Languages/Lexers/ActiproSoftware.Pascal.xml"/>
            <language key="Perl" definitionPath="~/Languages/Lexers/ActiproSoftware.Perl.xml"/>
            <language key="PHP" definitionPath="~/Languages/Lexers/ActiproSoftware.PHP.xml"/>
            <language key="PowerShell" definitionPath="~/Languages/Lexers/ActiproSoftware.PowerShell.xml"/>
            <language key="Python" definitionPath="~/Languages/Lexers/ActiproSoftware.Python.xml"/>
            <language key="SQL" definitionPath="~/Languages/Lexers/ActiproSoftware.SQL.xml"/>
            <language key="VB.NET" definitionPath="~/Languages/Lexers/ActiproSoftware.VBDotNet.xml"/>
            <language key="VBScript" definitionPath="~/Languages/Lexers/ActiproSoftware.VBScript.xml"/>
            <language key="XAML" definitionPath="~/Languages/Lexers/ActiproSoftware.XAML.xml"/>
            <language key="XML" definitionPath="~/Languages/Lexers/ActiproSoftware.XML.xml"/>
        </languages>
        <lineNumberMargin foreColor="Teal" paddingCharacter=" " visible="true"/>
        <outlining enabled="true" imagesPath="~/Images/OutliningIndicators/"/>
        <spacesInTabs count="4"/>
    </codeHighlighter>
</configuration>

如果其他语言，可参考使用 javascript 代码着色:
http://www.cnblogs.com/zss1100/archive/2007/06/17/786773.html

查看全文

相关阅读:
linux系统防火墙对访问服务器的影响
 Android 样式的开发（转）
Android开发学习总结(三)——appcompat_v7项目说明
 Android开发:碎片Fragment完全解析fragment_main.xml/activity_main.xml
BootStrap 常用控件总结
 mybatis自定义代码生成器（Generator）——自动生成model&dao代码
 MySql的下载和安装（解压版）
jquery mobile 表单提交图片/文件上传
 java读取.properties配置文件的几种方法
 AngularJS------认识AngularJS

原文地址：https://www.cnblogs.com/goody9807/p/1197100.html