在BugNet Issue維護中,
Description 及
comment是使用html編輯器的方式讓我們可以輸入html格式的文字,我覺得挺好用的.
在BugNet的source code查看這段的做法,發現是利用provider的方式做的,先把相關的srouce code 抽出來,試著放入自已專案用的程式碼中
1.下載最新的BugNet souce code, 目前版本是0.8.276.0, 解壓縮後,複製以下目錄
\BugNET-0.8.276-Source\src\Library\Providers\HtmlEditorProviders
2.建立一個新方案,把
\BugNET-0.8.276-Source\src\Library\Providers\HtmlEditorProviders\下的四個專案都加入, 如果有需要,可以修改一下專案的Assembly Name及相關的namespace,不然build出來的dll名稱會是BugNet開頭的dll
3.build 完後,分別將專案內的dll複製出來,add reference 到自已的website 專案中,
同時也複製 以下目錄檔案及檔案
a.
\BugNET-0.8.276-Source\src\BugNET_WAP\Providers\HtmlEditorProviders
b.
\BugNET-0.8.276-Source\src\BugNET_WAP\UserControls\HtmlEditor.ascx、
HtmlEditor.ascx.cs、HtmlEditor.ascx.designer.cs
3.開啟自已website專案的web.config檔, 加入以下
<configSections>
<section name="HtmlEditorProvider" type="BugNET.Providers.HtmlEditorProviders.HtmlEditorConfiguration, BugNET.Providers.HtmlEditorProviders" requirePermission="false" allowDefinition="MachineToApplication" />
</configSections>
<HtmlEditorProvider defaultProvider="CkHtmlEditorProvider">
<providers>
<add name="TextboxHtmlEditorProvider" type="BugNET.Providers.HtmlEditorProviders.TextboxHtmlEditorProvider, BugNET.Providers.TextboxHtmlEditorProvider" Height="250" Width="100%" />
<add name="FckHtmlEditorProvider" type="BugNET.Providers.HtmlEditorProviders.FckHtmlEditorProvider, BugNET.Providers.FckHtmlEditorProvider" Height="250" Width="100%" ToolbarSet="Default" Skin="Silver" providerPath="~\Providers\HtmlEditorProviders\fckeditor\" />
<add name="CkHtmlEditorProvider" type="BugNET.Providers.HtmlEditorProviders.CkHtmlEditorProvider, BugNET.Providers.CkHtmlEditorProvider" Height="250" Width="100%" Toolbar="Basic" providerPath="~\Providers\HtmlEditorProviders\CKEditor\" />
</providers>
</HtmlEditorProvider>
<pages enableSessionState="true" theme="Default">
<controls>
<add tagPrefix="bn" tagName="HtmlEditor" src="~/UserControls/HtmlEditor.ascx" />
</controls>
</pages>
以上紅字部份是依自已的需求做更改的
4.建立一個測試網頁
testHtmlEditor.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="testHtmlEditor.aspx.cs" Inherits="Issues.testHtmlEditor" %><asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> test <bn:HtmlEditor id="EditCommentHtmlEditor" Height="200" runat="server" /> </asp:Content>
執行後就可以看到html editor元件了.
BugNet預設的html editor toolbar是使用
"Basic", 這個定義你可在
\BugNET-0.8.276-Source\src\BugNET_WAP\Providers\HtmlEditorProviders\CKEditor\config.js 自行修改,以下是原本的定義
config.toolbar_Basic =[ ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['BidiLtr', 'BidiRtl' ], ['Link','Unlink','Anchor'], ['Image','Table','HorizontalRule'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Maximize', 'ShowBlocks','-','About']];
BugNet中還有不少可學習的點,沒什麼想法的人可以玩看看