如何在NativeScript中对选中文字修改字体、字号及格式？

NativeScript生态暂未封装开箱即用的全功能富文本编辑器，你可以基于原生TextView的自有能力二次封装，即可满足选中文本修改格式的需求，具体实现逻辑如下：

iOS端实现 #

• 基于原生UITextView的attributedText属性处理富文本，通过selectedRange拿到选中区间，修改对应范围的属性即可：
  • 字号调整：给指定范围添加NSFontAttributeName属性，传入对应尺寸的UIFont实例
  • 字体切换：修改NSFontAttributeName对应的字体名参数
  • 粗体/斜体：给指定范围添加NSFontTraitMask属性，对应设置BoldFontMask/ItalicFontMask
  • 下划线：添加NSUnderlineStyleAttributeName属性，值设为1即可开启

Android端实现 #

• 基于原生EditText的SpannableString类处理富文本，通过getSelectionStart()和getSelectionEnd()拿到选中范围，对对应区间设置Span：
  • 字号调整：使用AbsoluteSizeSpan指定字号数值
  • 字体切换：使用TypefaceSpan传入对应字体名
  • 粗体/斜体：使用StyleSpan，对应传入Typeface.BOLD/Typeface.ITALIC/Typeface.BOLD_ITALIC
  • 下划线：直接设置UnderlineSpan即可

跨层封装步骤 #

1. 继承NativeScript官方的TextView组件，扩展自定义属性和方法
2. 分别在iOS、Android的原生实现中添加富文本修改方法，暴露给JS层调用
3. 页面顶部添加格式操作栏，点击对应按钮时调用封装好的方法，传入当前选中范围和要修改的格式参数即可

以下是JS层调用示例代码：

// 封装后的TextView调用示例：将选中文字设置为16号粗体
const selectRange = textViewInstance.getSelectedRange();
textViewInstance.updateTextFormat(selectRange, {
  bold: true,
  fontSize: 16
});

内容的提问来源于stack exchange，提问作者Abdullah