Home > Developer > ASP

Asp.net develops code highlighting plug-in implementation code for FCKeditor

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

So I wrote an InsertCode plug-in for FCKeditor. The creation process of the entire plug-in is very simple:
For FCKeditor plug-in development, see the documentation on the FCKeditor Official Website:

Http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins
First, create an insertcode directory under the FCKeditor/editor/plugins directory and create a new fckplugin. js file under the insertcode directory.
Insert the following code into the new fckplugin. js file:
// Insert CodeCopy codeThe Code is as follows: FCKCommands. registerCommand ('insertcode', new FCKDialogCommand ('insertcode', FCKLang. insertCode, FCKPlugins. items ['insert']. path + 'insert' code. aspx', 700,600 ));
Var insertcodeItem = new FCKToolbarButton ('insertcode', FCKLang ['insertcode']);
InsertcodeItem. IconPath = FCKPlugins. Items ['inputcode']. Path + 'images/insertcode.gif ';
FCKToolbarItems. RegisterItem ('insertcode', insertcodeItem );

Create the images, lang, ages directory under the FCKeditor/editor/plugins/insertcode directory, create en. js, zh-cn.js under the lang directory. The content of en. js is:
FCKLang. InsertCode = 'insert Code ';
Zh-cn.js content is:
FCKLang. InsertCode = 'insert Code ';
Download CodeHighlighter http://www.jb51.net/codes/94.html
Decompress the control and copy ActiproSoftware. CodeHighlighter. netw.dll, ActiproSoftware. Shared. netw.dll, and CodeHighlighterTest. dll under the CodeHighlighter/bin directory to the BlogEngine. Web/bin directory,
Copy the entire Lexers directory in CodeHighlighter/languins/insertcode/Languages to the FCKeditor/editor/plugins/insertcode/languages directory,
Copy all Images in the CodeHighlighter/images/OutliningIndicators/directory to the FCKeditor/editor/plugins/insertcode/Images directory, download and save the image to FCKeditor/editor/plugins/insertcode/images/insertcode.gif.

Create insertcode. aspx in the FCKeditor/editor/plugins/insertcode/directory. Note that if you create an image using Visual Studio

The content of insertcode. aspx is as follows:Copy codeThe Code is as follows: <% @ Page Language = "C #" ValidateRequest = "false" %>

<% @ 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 (! Page. IsPostBack)
...{
CodeHighlighterConfiguration config = (CodeHighlighterConfiguration) ConfigurationManager. GetSection ("codeHighlighter ");
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 CodeHighlighter_PostRender (object sender, EventArgs e)
...{
If (! String. IsNullOrEmpty (Highlighter. Output ))
...{
LblCode. Text = Highlighter. Output. Replace ("", ""). Replace ("\ n", "<br/> ");
Response. Write ("<scr" + "ept> window. parent. SetOkButton (true); </scr" + "ept> ");
}
}
</Script>

<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> InsertCode By Moozi. Net </title>

<Script src = "http://www.cnblogs.com/dialog/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 (false );
}

Function OK ()
...{
If (GetE ('txtcode'). value = '')
...{
Alert ("the Code content cannot be blank! ");
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: # f4f4f4;
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">
Language type: <asp: DropDownList ID = "ddlLangType" runat = "server">
</Asp: DropDownList>
<Asp: CheckBox ID = "chkOutLining" Text = "folding code" runat = "server" Checked = "true"/>
<Asp: CheckBox ID = "chkLineNum" Text = "allowed row number" runat = "server" Checked = "false"/>
</Div>
<Div>
<Asp: TextBox ID = "txtCode" runat = "server" TextMode = "multiline" Width = "640px" Height = "390px"> </asp: TextBox>
</Div>
<Div class = "btnRun">
<Asp: Button ID = "btnSubmit" runat = "server" Text = "Switch" OnClick = "btnSubmit_Click"/>
<Pre id = "pre1" style = "display: none;">
<CH: CodeHighlighter runat = "server" ID = "Highlighter" OnPostRender = "CodeHighlighter_PostRender"/>
</Pre>
<Asp: Label ID = "lblCode" Style = "display: none;" runat = "server"> </asp: Label>
</Div>
</Div>
</Form>
</Body>
</Html>

Next, modify FCKeditor/fckconfig. js. In the original file, we can find // FCKConfig. plugins. add ('autogrow'); in this Code, insert: FCKConfig in the next line. plugins. add ('insert', 'zh-cn, en ');

Finally, modify the Web. config file: (See CodeHighlighter/Web. config)
Insert in <configuration>:
<ConfigSections>
<Section name = "codeHighlighter" requirePermission = "false" type = "ActiproSoftware. CodeHighlighter. CodeHighlighterConfigurationSectionHandler, ActiproSoftware. CodeHighlighter. Net20"/>
</ConfigSections>

Insert the following content after <system. web> </system. web>:
<CodeHighlighter>
<Cache languageTimeout = "3"/>
<KeywordLinking enabled = "true" target = "_ blank" defaultKeywordCollectionKey = "ActiproKeywords">
<KeywordCollection key = "ActiproKeywords">
<ExplicitKeyword tokenKey = "IdentifierToken" patternValue = "Actipro" url = "http://www.actiprosoftware.com" caseSensitive = "false"/>
<ExplicitKeyword tokenKey = "IdentifierToken" patternValue = "CodeHighlighter" url = "http://www.codehighlighter.com" caseSensitive = "false"/>
</KeywordCollection>
</KeywordLinking>
<Ages>
<Language key = "Assembly" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. Assembly. xml "/>
<Language key = "BatchFile" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. BatchFile. xml "/>
<Language key = "C #" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. CSharp. xml "/>
<Language key = "CSS" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. CSS. xml "/>
<Language key = "HTML" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. HTML. xml "/>
<Language key = "INIFile" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. INIFile. xml "/>
<Language key = "Java" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. Java. xml "/>
<Language key = "JScript" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. JScript. xml "/>
<Language key = "Lua" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. Lua. xml "/>
<Language key = "MSIL" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. MSIL. xml "/>
<Language key = "Pascal" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. Pascal. xml "/>
<Language key = "Perl" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. Perl. xml "/>
<Language key = "PHP" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. PHP. xml "/>
<Language key = "PowerShell" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. PowerShell. xml "/>
<Language key = "Python" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. Python. xml "/>
<Language key = "SQL" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. SQL. xml "/>
<Language key = "VB. NET" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. VBDotNet. xml "/>
<Language key = "VBScript" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. VBScript. xml "/>
<Language key = "XAML" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. XAML. xml "/>
<Language key = "XML" definitionPath = "~ /Fckeditor/editor/plugins/insertcode/ages/lexers/ActiproSoftware. XML. xml "/>
</Ages>
<LineNumberMargin foreColor = "Teal" paddingCharacter = "" visible = "true"/>
<Outlining enabled = "true" imagesPath = "~ /Fckeditor/editor/plugins/insertcode/images/"/>
<SpacesInTabs count = "4"/>
</CodeHighlighter>

This plug-in is complete. This method can be called once and for all. When you change the FCKeditor of a later version, you only need to modify fckconfig. js to add this plug-in.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More