取用BugNet的HtmlEditor Provider

在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中還有不少可學習的點,沒什麼想法的人可以玩看看