第一部分：CodeProject.Show：CodeProject 离线文章编写器

下载源代码

下载安装程序

您可能还对 CodeProject.Show DeepDive - 探索其背后的源代码 感兴趣

引言

本文的目的是介绍 CodeProject.Show，一个离线的 CodeProject 文章编写器。CodeProject.Show 是使用 WinForms、ICSharp.TextEditor 和 Webbrowser 控件以及 VB.Net 开发的。我五天前开始开发这个工具，以便能够离线编写我的 CodeProject 文章。这是因为有时网络连接不稳定，而且我曾因此丢失过一篇文章。我还想确保我能在一个地方跟踪和更新我的所有文章。

为此进行了大量的研究，并从这篇 文章 中找到了一些非常重要的信息。

您将获得...

一个离线的 CodeProject 文章编写器，使用与 CodeProjet 在编写文章时相同的模板。

• 能够创建无限数量的文章
• 使用加粗、斜体、下划线、下标、上标进行文本格式化。
• 能够更改字体、大小和颜色。
• 能够更改文本的前景色
• 左对齐、居中对齐、右对齐、两端对齐、缩进、取消缩进
• 剪切、复制、粘贴、无限撤销、无限重做
• 无序列表和有序列表
• 插入图片、边框图片和调整图片大小
• 标题格式化，H1 - H6，移除格式
• 块引用（类似 CodeProject 的灰色背景）、<code>、<div>、<address>
• 源代码格式化，例如 vb.net、css，就像在线编写器一样
• 向您的文档插入表单控件，例如文本框、按钮、选择列表等
• 打印预览、打印、页面设置
• 文章朗读 - 使用语音合成（Microsoft Narrator）朗读您的文章
• 文章的只读 HTML 视图
• 每分钟文章自动保存
• 每分钟文章备份（您永远不会丢失您的文章！）
• 能够切换文章树状视图的显示和隐藏
• 能够切换 HTML 视图的显示和隐藏
• 能够创建书签、链接，移除书签和链接
• 能够从文章树中查看所有链接（这些链接将在预览中打开）
• 能够从文章树中查看所有媒体文件（这些图片将在预览中打开）

我需要添加的内容...

• 拼写检查
• 拖放
• 添加表格
• <请提出建议>

一些粗略的假设：您以前写过 CodeProject 文章，并且熟悉文字处理。

背景

开发这样的应用程序需要一些研究。微软有一个 WebControl，可以通过 ExecCommand 向其传递命令。有关这些命令的更多信息，可以在 此处 找到。由于这是 WinForms 应用程序中的项目第一个版本，我必须说，创建一个这样的文章编写器的灵感之一来自这篇文章 这里。考虑到这一点，在搜索了类似的 artigo 后，我决定有一天我要这样做，现在它就在这里。我必须承认，我以前从未如此详细地编程过 WebControl，并且感谢通过谷歌，我能够将我学到的关于 WebControl 及其使用 ExecCommand 进行自动化的知识整合到这个应用程序中。对我来说，这一切最好的部分是：我知道如何做，并且我“改变世界”的热情再次得以实现。

作为这个应用程序的潜在用户，您随时可以提出建议和推荐。我可能会用上一些，即使是关于改进这个应用程序的建议，因为我相信它将为人们的生活带来很多价值，就像它为我带来的价值一样。您现在正在阅读的文章是从 CodeProject.Show 中构思和创建的。

如我在上面的链接中所述，使用 ExecCommand 和 WebControl 可以实现很多功能，但有些命令在大多数浏览器（甚至 Internet Explorer）中都不支持，因此我必须编写一些代码来实现某些功能。例如，要将选定的文章文本包装在 <code> 元素中，我必须编写如下脚本

    Private Sub WrapSelection(elementX As String)
        ' this does the same as formatcode, when it does not work
        ' element to set the attribute
        Dim hElement As IHTMLElement
        ' get the document
        Dim doc As IHTMLDocument2 = txtContent.Document.DomDocument
        ' get selected range
        Dim range As IHTMLTxtRange = doc.selection.createRange()
        ' text block quote
        hElement = doc.createElement(elementX)
        hElement.innerHTML = range.htmlText
        range.pasteHTML(hElement.outerHTML)
    End Sub

其中 **elementX** 可以是任何东西，例如“code”、“div”等。

要使用 CodeProject.Show，需要了解其结构。该应用程序分为几个部分。以下是这些部分：

工具栏 - 这提供了编写文章的大部分功能

树状视图 - 列出您所有的文章，您可以单击一篇文章来打开它、删除它、重命名它等等。这是可切换的，您可以隐藏和显示它。

文章编写器 - 屏幕的中间部分，您在此处编写文章。这部分使用 WebControl 的设计模式和 contentEditable 功能。您的文章每隔 1 分钟自动保存一次，并在您编写时进行备份。每篇文章都保存为一个 html 文件，使用唯一的文章编号。

HTML - 屏幕的右侧部分也是可切换的，您可以在这里查看文章的 HTML 源代码。此部分为只读。

状态栏 - CodeProject.Show 的底部是状态栏，可以提供文档的一些统计信息。它会告诉您文章中有多少字，上次保存时间，包含文章详细信息的文件夹的大小及其位置。

本文的目的不是关于我如何创建这个应用程序，而是更多地关于如何使用它来编写您的离线 CodeProject 文章。不过，我将另写一篇文章来详细介绍这个 所见即所得 HTML 编辑器是如何创建的，并在其中提供源代码。以下是 CodeProject.Show 使用的三个部分。

使用代码

1. 使用 CodeProject.Show 管理文章

使用 CodeProject.Show 管理文章包括：创建新文章、删除文章、重命名文章、重置文章和将文章保存为 html 文件。

1.1 文件 > 新建

这是将新文章添加到您的文章数据库中。您需要键入树状视图项，输入新文章的名称，然后按 Enter。

每篇新文章的名称都为“新文章”，您可以将其替换为您想要的文章名称。文章名称最多为 **255** 个字符，并且 **不接受特殊字符**，例如 ,?><|* 等，就像文件名一样。

1.2 文件 > 删除

用于删除您的文章。您必须从列出的文章中选择您的文章，然后单击文件 > 删除将其移除。已删除的文章无法撤销。

1.3 文件 > 重命名

如果您想更改文章名称，请单击文件 > 重命名，然后在创建新文章时键入您的文章名称。只有文章的标题会被更改。

1.4. 文件 > 重置

重置文章会清除文章的所有内容，并创建一个空白模板供您编写。只有当您想从头开始重写文章时才执行此操作。此操作无法撤销。

1.5. 文件 > 另存为

此功能与从 Internet 浏览器保存页面相同。选择后，您的文章将保存为单个 htm 文件。

1.6 文件 > 关闭

退出应用程序。

2. 编写和格式化您的文章

现在您已经创建了新文章，是时候开始编写内容了。每次创建新文章时，CodeProject 文章模板都会用作空白文章，需要更新才能让您的文章充实起来。

单击文章中的任何位置，您的鼠标指针将开始闪烁，以便您键入。

在开始编写之前，您可能希望隐藏文章的树状视图和 HTML 视图。为此，请单击 **TreeView Toggle** 和 **HTML Toggle** 按钮，如下图所示。

HTML 切换按钮就在树状视图切换按钮旁边。这将打开整个屏幕供您编写。现在，让我们继续编写我们的文章并进行格式化以便发布。

注意：需要记住的一点：您需要选择文章中您想处理的任何文本。

我假设您以前写过 CodeProject 文章，并且熟悉文字处理。这意味着您会熟悉工具栏，因为它看起来会与您以前用过的工具栏相似。因此，您知道剪切、复制、粘贴的作用。只需确保先选择文本，然后单击相应的按钮来处理您的文章内容。为了更清楚地说明，我只会简单介绍一些功能。

2.1 格式化标题

标题按钮具有一些功能，可以从 H1-H6 格式化您的标题，并且还可以移除格式、为选定的文本插入 <code>、<div> 和 <address> 元素。

选择要格式化的文本，然后单击相应的标题或操作。

2.2 格式化源代码

您的文章中可能有一些源代码需要格式化。选择您的源代码，然后单击相应的格式来应用，以便最终用于发布的文章。您的格式化代码将像往常一样以橙色背景高亮显示，当您使用在线 CodeProject 编写器预览文章时，您将看到结果，如下图所示。

2.3 更改文本的前景色

选择要应用前景色设置的文本，然后单击提供的按钮并选择您想要应用为前景色的颜色。

2.4 更改字体属性

选择要应用字体的文本，然后单击字体按钮并应用您的字体属性。

2.5 插入链接

选择要应用链接的文本，然后单击链接按钮。复制或粘贴链接。要删除链接，您需要选择它，然后单击取消链接按钮。

2.6 您也可以在内容中插入水平线

2.7 插入图片

将插入点放在您想要放置图片的位置，然后单击相应的按钮。浏览图片位置。您可能想为图片指定边框厚度。我在这篇文章中使用了 2 的边框厚度来区分我的图片。此按钮具有插入 2 边框到图片周围以及将每张图片的宽度调整到 600px 的功能。

您所有的文章都可以在文章的 Media 节点下访问。*这些在您选择此节点时会被复制到文章文件夹中。*

2.8 插入表单控件

您可以向文章插入表单控件，包括复选框、文件上传、隐藏域、密码、单选按钮、重置按钮、提交按钮、文本框、按钮、字段集、输入按钮、输入图片、下拉列表、列表框和文本区域，它们将显示如下：（您可以双击这些来更新）

<input id="chkBox" type="checkbox" />

<input id="fileUp" type="file" />

<input id="hidd" type="hidden" />

<input id="pwd" type="password" value="password" />

<input id="rbtn" type="radio" />

<input id="reset" type="reset" value="Reset" />

<input id="refer" type="submit" value="Submit Query" />

<input id="txt" value="Text" />

<button id="btn"></button>按钮

 

 

 

<input id="inpB" type="button" />输入按钮

<input id="inpImg" type="image" />输入图片

<select id="cbo"></select>

<select id="selList" multiple="multiple"></select>

<textarea id="txta"></textarea> 

2.9 插入锚点/书签

锚点按钮就是为此而设的。要删除书签，请选择它，然后单击标题按钮 > 移除书签。

3. 打印和预览您的文章

CodeProject.Show 提供了打印预览、打印您的文章以及页面设置的功能。如下图所示。

3.1 打印预览

这将生成您文章的打印预览。

3.2 属性

这仅显示文章属性。

3.3 页面设置

您还可以为打印设置页面。

3.4 打印

打印时，您可以选择要打印文章的打印机，根据打印机，将会输出纸质或电子版本。

4. 文章朗读

文章朗读功能是使用语音合成（Microsoft Narrator）来朗读您的文章。您可以单击开始朗读，也可以随时暂停。

要让 CodeProject.Show 朗读您的文章，请从可用列表中选择您的朗读器，我已安装了 Microsoft Anna。然后选择开始朗读按钮。您也可以通过单击停止按钮来暂停或停止朗读。

5. 树状视图文章详情

选择一篇文章时，总会显示一些有趣的信息。这些是 zip 文件、媒体（所有图片）和链接。要为每篇文章提取这些内容，请确保文章已选定并显示，因为这会遍历文档的 DOM 来读取链接。

您可以选择一个链接，使其详情显示在文章编写区域内。例如，我的网站。我添加了它的链接，它是我链接的一部分。从链接中选择它将打开我的网站。

Media 链接显示文章中链接的所有图片、视频等。您会注意到这些仍然在它们原来的位置。我们需要将它们移动到文章存储的位置，以便我们可以将它们拖放到 CodeProject 中的在线文章。选择 Media 标签会将所有图片复制到文章文件夹，并更新文档中的链接。但这会导致 CodeProject.Show 中的链接断开，图片将无法显示。然后，您可以从 File 菜单中选择 Open With Browser 来检查您的文章。

要再次显示图片，在 Insert Image 按钮上，单击Fix Image Links（修复图片链接），这些图片将再次显示。但在将文章发布到 CodeProject 之前，请注意，在 CodeProject.Show 中图片确实会显示为损坏的。

<P><IMG border=2 hspace=0 alt="" src="C:\Source Code\CodeProject.Show\CodeProject.Show\bin\Debug\Articles\4\screens.png" align=baseline></P>

要使用 CodeProject，每张图片都不应该有路径。要移除路径，请单击文章的 Media 节点。

注意。当选择 *Zip Files, Media 和 Links* 节点时，您的文章不会被保存。请务必始终在树状视图中选择文章以进行保存。

6. HTML 详情

HTML 详情是只读的，即使您可以更改它们，您的更改也不会反映回来。

这只是显示您的文章，带有漂亮的颜色代码格式。

7. 状态栏

状态栏显示您文章的一些有趣统计信息。

这将是您文章中的字数、上次保存时间、文件夹内容的体积及其位置。

8. 文章位置

状态栏中的文章位置指示您文章内容的存储位置。到目前为止您输入的所有内容都存储在一个单独的 html 文件中，如上面的 Articles Folder\4 所示。

4 是与此主题关联的唯一编号。要打开文件位置，请在 CodeProject.Show 中单击 File > Open Location。这将在资源管理器中打开该文件夹。这是您可以拖放到 codeproject 的内容，例如图片等。至于文章本身，您需要复制和粘贴。

BAK 文件夹将包含您文章的所有分钟备份。

9. 文章通过浏览器打开

10. 将您的文章复制到 CodeProject

1. 像往常一样在线撰写文章，并指定相应的标签和子标签等。

2. 在 CodeProject.Show 中转到 File > Open Location。这将打开您的文章文件夹，以便您访问文件。

3. 在 CodeProject.Show 中转到 File > Publish。这将创建您文章的 HTML 内容。您稍后将使用它。文件名将始终是 **publish.txt**。

4. 将所有图片从文章文件夹拖放到在线 CodeProject 拖放区域。

5. 在在线 CodeProject 文章编写器中选择 **Source**。这将显示您的文章源代码。按住 Ctrl+A 选择所有内容，然后按 Delete。

6. 将 publish.txt 中的所有内容复制到在线文章编写器的源部分。

7. 单击在线文章编写器中的 Source。您离线编写并已发布到 CodeProject 的文章应该保持完整。您的图片链接可能会显示为损坏，但请不要担心。

8. 单击 Preview 在 CodeProject 网站上预览您的文章。

9. 在线完成您的文章并发布。完成！ 

关注点

我管理的一件有趣的事情是生成了用于块引用选定文本的源代码。经过大量研究，我通过运行这段 vb 代码实现了这一点。

Private Sub cmdBlockQuote_Click(sender As Object, e As EventArgs) Handles cmdBlockQuote.Click
        Timer1.Enabled = False
        ' build text to add
        Dim txtToAdd As New StringBuilder
        txtToAdd.Append("<div class=")
        txtToAdd.Append(Chr(34).ToString)
        txtToAdd.Append("op")
        txtToAdd.Append(Chr(34).ToString)
        txtToAdd.Append(">Quote:</div>")        ' element to set the attribute
        Dim hElement As IHTMLElement
        ' get the document
        Dim doc As IHTMLDocument2 = txtContent.Document.DomDocument
        ' get selected range
        Dim range As IHTMLTxtRange = doc.selection.createRange()   

hElement = doc.createElement("blockquote")
        hElement.setAttribute("class", "quote")
        hElement.innerHTML = txtToAdd.ToString & range.htmlText
        range.pasteHTML(hElement.outerHTML)
        SaveContent()
        Timer1.Enabled = True
    End Sub

这使用了一个范围对象来读取选定的文本，创建一个元素并为其添加一个类，然后粘贴 HTML 来渲染引用。我将在 CodeProject.Show 中引用下面的文本。

引用

我爱 CodeProject.Show！ @mash

就这样，各位。欢迎来到 CodeProject 离线文章编写的世界！！

附注：setup.zip 文件中的内容是一个可执行文件，需要重命名。选择现有文章并运行 Fix Image Links 来显示您安装到现有文章中的图片。