在MOSS中给增强型RTF字段增加按钮

很多人会抱怨MOSS默认的讨论区比较弱，比起大部分BBS来说，确实少了很多功能。实际上对于MOSS的讨论区来说，已经是一个树型结构了， 我们只要稍加改善，就能够让讨论区更完善一些。

昨天中午和同事讨论起这个话题，认为讨论区只要要改进4个地方：

  • 1：贴图，也就是能否在编辑帖子的时候，同时上传图片，并且贴到正文里面。这个我在前几天的blog里面已经讲了，这个功能已经实现了， 大家可以参考：在MOSS中实现自动上传图片
  • 2：有头像，这个功能MOSS本身就有。大家看我的讨论区，我的帖子就有我的头像，当然现在还不允许大家自己设置头像，我想以后我会实现这个功能。
  • 3：有签名，能够在发帖的时候增加签名档，这个是需要改进的地方。也是我考虑下一步去实现的。
  • 4：能够贴表情，也就是类似QQ，MSN一样，能有贴表情的按钮。

    今天我们就讲讲如何实现第4个，首先看贴图：

    这张图截自我的网站的讨论区， http://www.oceanstudio.net/Lists/SharePoint3/AllItems.aspx，大家可以自己去看实际效果，当然为了防止恶意灌水，本讨论区需要注册。

    我的实现方式很简单，讨论区默认的正文输入框是一个增强型的RTF，我做的就是在上面加了一个按钮。

    上篇Blog我们曾经讲过，如果要替换掉整个编辑器，我只要重写RTE_ConvertTextAreaToRichEdit()这个函数就可以了。但是有时我只希望增加一两个按钮，如何做呢？

    FullHtml，也就是增强型RTF的工具栏的按钮，都在RTE_FullHtmlToolBarDefinitionFactory()这个函数里面定义这，这里面有一个toolbar变量，我们只要在合适 的位置，增加我们的按钮就可以，我把它加入到插入图片的按钮后面，向toolbar加入按钮的时候，首先要生成一个新按钮，按钮有三种：

  • 1：ExecCmdButton，这属于命令按钮，就是点中按钮后没有多余界面出来，比如copy，paste，cut等
  • 2: JScriptButton，这些都会弹出对话框，比如“插入图片”，“插入链接”这些按钮等
  • 3：SpecialButton，这些就是类似我做的这个插入表情的按钮，它会有一个下拉单，让你选择，另外还有就是选择“前景色”，“背景色”的这些按钮。就是类似下图这样的。 
    //////////////////////自定义按钮///////////////////////////
//增加表情按钮
toolBar.push(
new C_RTE_TB_SpecialButton(
g_strRTEInsertEmoticonMnemonic,
RTE_GenerateInsertEmoticonToolBarButtonHtml,
true,
new C_RTE_TB_SetEnabledAlways()));
///////////////////////////////////////////////////////////

    创建好按钮后，就要生成这个按钮的主体html，这个我们定义一个新函数：RTE_GenerateInsertEmoticonToolBarButtonHtml。生成完按钮主体后， 就要生成那个表情选择器，这个选择器我也创建了一个新函数RTE_DD_OpenInsertEmoticonSelector。选择器实际上有现成的一些函数可以调用。 这个函数就是：RTE_DD_GenerateMenuItemHtml，每个MenuItem就是一个表情按钮。通过这些已经预定好的函数生成选择器后，你会发现你不用去设定位置， 它会自动的在你的按钮的下方出现。

    当你的按钮出来之后，你需要做的就是点击按钮返回的动作，这个动作会调用RTE_ExecuteCommandOnSelection这个函数，在这个函数里面，执行了 docEditor.execCommand()函数，执行插入图像的动作，每个表情就是一个图片。

    if (strCommand == "InsertEmoticon") {
docEditor.execCommand("InsertImage", fUserInterface,
RTE_GetServerRelativeImageUrl("Emoticon/" + strValue));
}

    这里提醒大家注意一下的就是，我们的toolbar是在一个Iframe里面的，所以点击了表情按钮之后，实际上的函数调用发生在Iframe内部，如果你想让它调用 父框架的函数，那么请使用parent或者top。这个按钮我一共花了3个小时，但是这个小问题就花了我1个小时的时间，之后才恍然大悟想起来表情按钮都是在Iframe中。

    当然实际上做一个按钮不需要那么长时间，除了刚刚的那个Iframe问题之外，我还花了一些时间来收集表情图片，并且一个一个的写到数组里面，这个也属于个体力活。

    当我们给这个工具栏加上按钮后，那么每个字段，只要采用了增强RTF型，就会有这个插入表情的功能。

    本篇blog首发：oceanstudio-blog

    欢迎访问海洋工作室

    • posted on 2008-08-01 22:29  ocean  阅读(2161)  评论(6)  编辑  收藏  举报

    导航