之前写过一篇WP8下的富文本的文章,但是写的不是很好,整理了一下,分享一下WP8.1下的富文本处理

富文本处理主要是对表情和链接的处理,一般使用RichTextBlock进行呈现

问题说明:

  由于RichTextBlock内部的元素不是普通的FrameworkElement,而是继承自TextElement,FrameworkElement的一些属性不支持

  当HyperLink设置了NavigateUri属性时,其默认的行为是跳转到外部的IE浏览器

  有时候我们需要自定义HyperLink的行为,例如QQ:当点击富文本的链接时,弹出ContextMenu,或者调到内部的浏览器,或者调到指定页面

  所以不能设置NavigateUri值,通过Click事件处理相关逻辑,我们需要把链接的值传到Click事件中,这里我用了附加属性给HyperLink附加一个属性,以保证在Click事件能取到导航的值

下面是代码

  表情和链接的解析用正则表达式

1、定义附加属性的类

  1. public class HyperLinkExtensions
  2. {
  3. public static readonly DependencyProperty NavigateUrlProperty = DependencyProperty.Register(
  4. "NavigateUrl", typeof (string), typeof (HyperLinkExtensions), new PropertyMetadata(default(string)));
  5.  
  6. public static string GetNavigateUrl(Hyperlink element)
  7. {
  8. return (string)element.GetValue(NavigateUrlProperty);
  9. }
  10.  
  11. /// <summary>
  12. /// 为HyperLink附加NavigateUrl属性
  13. /// </summary>
  14. public static void SetNavigateUrl(Hyperlink element, string value)
  15. {
  16. element.SetValue(NavigateUrlProperty, value);
  17. }
  18. }

2、Xaml

  1. <Grid>
  2. <RichTextBlock FontSize="25" x:Name="Rtb"/>
  3. </Grid>

3、富文本处理

  1. //表情字典,表情转文件名
  2. private readonly Dictionary<string, string> emojiDict = new Dictionary<string, string>
  3. {
  4. {"大笑", "daxiao"},
  5. {"大哭", "daku"},
  6. };
  7.  
  8. /// <summary>
  9. /// 文本转富文本
  10. /// 表情为格式为:{表情}
  11. /// 链接格式为:<a href="http://www.baidu.com">百度</a>
  12. /// </summary>
  13. private Paragraph AnalyzeText(string richText)
  14. {
  15. richText = Regex.Replace(richText, "{(?<emoji>[^}]+)}|<a[^>]*?>(?<link_title>[^<]*?)</a>", i =>
  16. {
  17. if (!string.IsNullOrEmpty(i.Groups["link_title"].Value))
  18. {
  19. const string link =
  20. @"<Hyperlink Foreground=""{{StaticResource PhoneAccentBrush}}"" NavigateUri=""http://www.baidu.com"">
  21. <Underline>{0}</Underline>
  22. </Hyperlink>";
  23. return string.Format(link, i.Groups["link_title"].Value);
  24. }
  25. if (!string.IsNullOrEmpty(i.Groups["emoji"].Value))
  26. {
  27. const string image = @"<InlineUIContainer>
  28. <Image Source=""/Assets/Emoji/{0}.png"" Width=""30"" VerticalAlignment=""Center""/>
  29. </InlineUIContainer>";
  30. return string.Format(image, emojiDict[i.Groups["emoji"].Value]);
  31. }
  32.  
  33. return string.Empty;
  34. });
  35.  
  36. const string paragraph = @"<Paragraph
  37. xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
  38. xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">
  39. {0}
  40. </Paragraph>";
  41.  
  42. var p = (Paragraph)XamlReader.Load(string.Format(paragraph, richText));
  43.  
  44. HandleHyperlink(p);
  45. return p;
  46. }
  47.  
  48. /// <summary>
  49. /// 处理点击事件
  50. /// </summary>
  51. /// <param name="p"></param>
  52. private void HandleHyperlink(Paragraph p)
  53. {
  54. foreach (var inline in p.Inlines)
  55. {
  56. var link = inline as Hyperlink;
  57. if (link != null)
  58. {
  59. HyperLinkExtensions.SetNavigateUrl(link, link.NavigateUri.OriginalString);
  60. link.NavigateUri = null;
  61. link.Click += link_Click;
  62. }
  63. }
  64. }
  65.  
  66. private async void link_Click(Hyperlink sender, HyperlinkClickEventArgs args)
  67. {
  68. var uri = HyperLinkExtensions.GetNavigateUrl(sender);
  69. //这里定义点击事件
  70. await new MessageDialog(uri).ShowAsync();
  71. }

4、测试

  1. private void Test()
  2. {
  3. var richText = @"2015年喽嘻嘻~~新年新气象,三羊开泰,诸事喜气洋洋。GO~,发红包啦<a href=""http://www.baidu.com"">点我领红包</a>{大笑}哈哈{大哭}呜呜";
  4.  
  5. var p = AnalyzeText(richText);
  6. Rtb.Blocks.Add(p);
  7. }

5、结果

Demo:http://files.cnblogs.com/files/bomo/RichTextDemo8.1.zip

声明:转载请注明出处  http://www.cnblogs.com/bomo/p/4320595.html

【WP8.1】富文本的更多相关文章

  1. 【WP8】富文本功能实现

    2014年8月1日更新:修复如果有多个相同链接解析失败的Bug,谢谢 @Walsh 提供的问题 富文本在移动APP上应用的最多的就是表情了,类似微博,QQ,微信都有对提供对表情和链接的支持,富文本一般 ...

  2. 富文本编辑器Simditor的简易使用

    最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...

  3. 个人网站对xss跨站脚本攻击(重点是富文本编辑器情况)和sql注入攻击的防范

    昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...

  4. 图解DevExpress RichEditControl富文本的使用,附源码及官方API

    9点半了,刚写到1.2.   该回家了,明天继续写完. 大家还需要什么操作,留言说一下,没有的我明天继续加. 好久没有玩DevExpress了,今天下载了一个玩玩,发现竟然更新到14.2.5了..我去 ...

  5. jsp富文本图片和数据上传

    好记性不如烂笔头,记录一下. 2016的最后一天,以一篇博客结尾迎接新的一年. 此处用的富文本编辑器是wangEditor,一款开源的轻量级的富文本编辑器,这里着重说一下里面的图片上传功能. 服务器端 ...

  6. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  7. iOS - NSMutableAttributedString富文本的实现

    NSMutableAttributedString继承于NSAttributedString(带属性的字符串)能够简单快速实现富文本的效果;不多说直接上效果图和代码,通俗易懂: (一)效果图: (二) ...

  8. 【代码笔记】iOS-获得富文本设置以后的文字高度

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  9. PHP Ueditor 富文本编辑器

    2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...

随机推荐

  1. 项“XXXXX.sln”已在选择的位置受源代码管理

    项“XXXXX.sln”已在选择的位置受源代码管理.如果尝试重新绑定已在 Microsoft Visual Studio 外部添加到源代码管理的项目,应使用“更改源代码管理”命令.如果是第一次添加此项 ...

  2. dubbo通信协议之对比

    对dubbo的协议的学习,可以知道目前主流RPC通信大概是什么情况,本文参考dubbo官方文档 http://dubbo.io/User+Guide-zh.htm dubbo共支持如下几种通信协议: ...

  3. 高吞吐量的分布式发布订阅消息系统Kafka--安装及测试

    一.Kafka概述 Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据. 这种动作(网页浏览,搜索和其他用户的行动)是在现代网络上的许多社会功能的一个关键因 ...

  4. Android NDK 同时编译多个Module

    LOCAL_PATH := $(call my-dir) ## ## NDK 支持同时编译多个Module: ## 在配置的时候,每个Module需要 以 include $(CLEAR_VARS)开 ...

  5. 在 Excel 中使用公式拆分字符串日期

    如图所示,分别使用 LEFT.MIDB.RIGHT 来拆分再拼接字符串即可: =LEFT(A1,4)&"-"&MIDB(A1,5,2)&"-&qu ...

  6. 修改windows系統下xampp中apache端口被其他程式占用的問題

    windows 7安裝後啟動xampp, 提示port 443 被其他程式占用. 網上查找解決方案: http://stackoverflow.com/questions/21182512/how-t ...

  7. Win7 64位 Visio反向工程(MySQL)

    1 看Office的版本,我安装的是32位的版本,故要去MySQL的官网下载对应32位的ODBC驱动: http://dev.mysql.com/downloads/connector/odbc/ 2 ...

  8. Swift 集合类型

     Swift语言提供数组和字典的集合类型  Swift 语言里的数组和字典中存储的数据值类型必须明确 ,即数组中只能存放同类型的数据. 1: 数组 数组的创建 var shoppingList: St ...

  9. Idea 201601注册码

    参考链接 http://blog.csdn.net/u010310183/article/details/51162137 在license 下面输入 http://www.iteblog.com/i ...

  10. Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现

    周末升级了墨迹天气,看着引导界面做的不错,模仿一下,可能与原作者的代码实现不一样,但是实现的效果还是差不多的.先分享一篇以前的文章,android动画的基础知识,<Android UI开发第十二 ...