• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

tophat/RichTextView: iOS Text View (UIView) that Properly Displays LaTeX, HTML, ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

tophat/RichTextView

开源软件地址(OpenSource Url):

https://github.com/tophat/RichTextView

开源编程语言(OpenSource Language):

Swift 91.3%

开源软件介绍(OpenSource Introduction):

RichTextView

Cocoapods Carthage compatible Builds
All Contributors Discord License - Apache-2 Maturity badge - level 3 Pull Reminders

iOS Text View (UIView) that Properly Displays LaTeX, HTML, Markdown, and YouTube/Vimeo Links

Installation

Using Cocoapods

Simply add the following to your Podfile:

pod 'RichTextView'

And run pod install in your repo.

Using Carthage

Simply add the following to your Cartfile:

github "tophat/RichTextView"

And run carthage update --platform iOS in your repo.

Usage

You can instantiate a RichTextView by importing the project first:

import RichTextView

To init a RichTextView:

let richTextView = RichTextView(
    input: "Test",
    latexParser: LatexParser(),
    font: UIFont.systemFont(ofSize: UIFont.systemFontSize),
    textColor: UIColor.black,
    isSelectable: true,
    isEditable: false,
    latexTextBaselineOffset: 0,
    interactiveTextColor: UIColor.blue,
    textViewDelegate: nil,
    frame: CGRect.zero,
    completion: nil
)

You can also update an existing RichTextView as follows:

richTextView.update(
    input: "Test",
    latexParser: LatexParser(),
    font: UIFont.systemFont(ofSize: UIFont.systemFontSize),
    textColor: UIColor.black,
    latexTextBaselineOffset: 0,
    interactiveTextColor: UIColor.blue,
    completion: nil
)

The parameters are defined as follows:

  • input - The string you want to render
  • latexParser - You can pass your own class that conforms to LatexParserProtocol if you want to handle LaTeX parsing in a custom way. Currently we use the iosMath Pod to handle LaTeX parsing by default
  • font - The font of the text to render
  • texColor - The color of the text to render
  • isSelectable - A property that determines whether or not RichTextView is selectable
  • isEditable - A property that determines whether or not RichTextView is editable
  • latexTextBaselineOffset - The baseline offset of the attributed text attachment that represents any LaTeX text that needs to be rendered
  • interactiveTextColor - The text color of any interactive elements/custom links (see Interactive element in Formatting the input)
  • textViewDelegate - A RichTextViewDelegate - conforms to UITextViewDelegate and also has handling when interactive elements/custom links are tapped
  • frame - A CGRect that represents the frame of the RichTextView
  • completion - A completion block to handle any errors that might be returned. The input will still render even if there are errors, however it might look differently than expected.

Formatting the input

In order for the RichTextView to handle the various use cases it might encounter, the input string needs to be formatted as follows:

  • LaTeX: Put any text you want to render as LaTeX in between two [math] and [/math] tags. Example: [math]x^n[/math]
  • Code: Put any text you want to render as code in between two [code] and [/code] tags. Example: [code]print('Hello World')[/code]
  • HTML/Markdown: No formatting necessary
  • YouTube Videos: Put the ID of the YouTube video in a YouTube tag as follows: youtube[dQw4w9WgXcQ]. The YouTube ID of any video can be found by looking at the URL of the video (Example: https://www.youtube.com/watch?v=dQw4w9WgXcQ) and taking the value right after the v= URL parameter. In this case the ID of the YouTube video is dQw4w9WgXcQ
  • Vimeo Videos: Put the ID of the Vimeo video in a Vimeo tag as follows: vimeo[100708006]. The Vimeo ID of any video can be found by looking at the URL of the video (Example: https://vimeo.com/100708006) and taking the value right after the first /. In this case the ID of the Vimeo video is 100708006
  • Interactive element: If you want to add text that has custom handling when you tap it, put the text in between two [interactive-element id=<id>] and [/interactive-element] tags. By doing this, when a user taps this text it will call the didTapCustomLink function of RichTextViewDelegate with the ID of the text that represents the interactive element (<id>), so be sure to hook into RichTextViewDelegate to capture this.

Screenshots

Check out the sample project in the Example root folder to see the screenshots above in action!

Architecture

Architecture

Contributing

Simply clone the repo, run pod install and you should be good to go

If you want to visually devQA your changes you can navigate to the Example project (found in the root Example folder), run pod install and then build and run the app. This will show you some common usages of the RichTextView.

The example project points to the local copy of the RichTextView pod, so any changes made locally will be reflected in the sample project.

However, you need to be on the legacy build system to see your changes reflected. There is a known issue with caching development Pods and XCode 10.

Feel free to add additional input/output examples to the example project, especially if you add any new functionality.

Also, be sure to run the unit/UI tests locally as part of the devQA process.

Credits

Thanks goes to these wonderful people (emoji key):


Ahmed Elkady


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap