Jiffycms HTML 编辑器新手入门

引言

在如今的 ASP.NET 中，您会注意到，默认情况下，开箱即用的功能里没有标准的富文本编辑器控件。您还会注意到，您唯一的可行选项仅限于

• FREETEXTBOX --虽然名字暗示它是免费的，但免费的仅是功能子集，完整版本是收费的。
• FCKEditor --这是当今市场上使用最广泛的编辑器，因为它开源；然而，它主要只是一个客户端产品，有几个贡献者围绕客户端库编写了服务器端包装器。然而，这样做的问题是，Web 控件只是一个包装器。
• 您从第三方购买商业许可证（相当昂贵）。

Jiffycms HTML 编辑器 是一款具有商业级功能的富文本开源 HTML 编辑器，是上述所有三种情况的绝佳替代品。它专为 ASP.NET 编写，并充分利用了 ASP.NET AJAX 扩展。它也是一个丰富的服务器端 Web 控件，需要您付出极少的努力即可运行，因为它充分利用了 VS.NET 设计器。功能实在太多，无法在此一一列举；相反，本文将重点介绍首次使用，特别是如何将 WebControl 生成的 CSS 移至外部 CSS 文件。

与大多数 HTML 编辑器不同，Jiffycms HTML 编辑器 是一个真正的 Web 控件，没有任何额外的依赖项，并打包成单个 DLL。由于它构建在 AJAX Extensions 库之上，而许多人由于使用 UpdatePanel 或其他功能而已经在其页面中引用了该库，因此客户端库下载的大小负载已最小化：这是您今天在其他第三方编辑器中会遇到的情况，因为它们倾向于使用自己的自定义库。

在这篇文章中，我想展示一下在您的页面中使用 Jiffycms HTML 编辑器 有多容易，以及如何通过使用外部 CSS 样式表文件来执行一些优化，以获得 Web 应用程序的最佳性能。

用法

首先，让我们从基础开始，为本教程的目的定义一个新的 WebSite 项目

现在，让我们从 CodePlex 下载 Jiffycms HTML 编辑器 DLL。既然我们有了 DLL，也就是 Jiffycms.Net.Toolkit.dll，我们就可以将其添加到 VS.NET 的工具箱中。在将其添加到工具箱之前，为了更好地组织所有自定义控件，您可能想先创建一个新的工具箱选项卡，然后在其中添加控件。

现在，右键单击新创建的选项卡空白区域，然后从上下文菜单中选择“选择项”。您也可以直接将 DLL 拖放到空白区域。

当您完成浏览到从 CodePlex 下载的 DLL 后，此时您应该在工具箱中看到它，并且可以开始使用这个优秀的组件了。

虽然您可能不喜欢在 VS.NET 的设计视图中工作，但将控件从工具箱拖放到 Web 窗体上将允许编辑器自动在您的 web.config 文件中进行初始配置。这些注册也可以手动完成，它只是在 web.config 中注册一个简单的 HttpHandler。

如果您希望手动执行此操作，请在 Configuration/httpHandlers 部分下的路径中添加以下条目；对于 IIS 6，如下所示：

<add verb="*" path="jiffycms.axd" 
     type="Jiffycms.Net.Toolkit.WebResourceHandler" />

对于 IIS 7，您需要在 Configuration/system.webServer/Handlers 部分下进行条目，如下所示：

<add verb="*" path="jiffycms.axd" name="WebResourceHandler" 
  type="Jiffycms.Net.Toolkit.WebResourceHandler" 
  preCondition="integratedMode" />

注意：如果您是从工具箱拖放组件，则此操作已为您完成。

在设计时拖放控件后，HTML 编辑器在设计视图中的外观如下：

太好了，我们获得了设计时渲染的编辑器。现在，就是时候玩弄属性网格中的各种属性了。运行页面时，您会注意到渲染页面 head 部分有大量的 CSS 输出。虽然这是默认设置，但您可以选择将 CSS 放在外部 CSS 文件中。这样做不仅可以减少页面负载，而且由于 CSS 在外部 CSS 文件中，它将被浏览器缓存，因此后续请求将自动从缓存中提供。

幸运的是，这种更改并不难。您可以使用设计时功能来收集控件生成的所有运行时 CSS，并手动将其复制到外部 CSS 文件中。

只需复制 CSS 并将其粘贴到外部样式表中，然后通过 ExternalStyleSheet 属性引用 CSS 文件。

请注意，每次对编辑器进行修改时，例如修改设计器中的样式或修改依赖于样式的属性，如 IconsMode、ToolbarMode 等，您都需要重新生成 CSS 并手动更新 CSS 文件。幸运的是，如果您决定采取这种方式，您也可能自己编辑 CSS，所以这可能也不是不方便。

历史

更新：2009 年 3 月 22 日

现在有一篇新文章介绍 Jiffycms HTML 编辑器中的 Image Gallery。