序幕 (Prologue)

I have always been fascinated with the great Open Source community that all of us software developers enjoy. There have been some great frameworks which have come out of people’s passion for solving a problem or making a great thing even better. I have used so many open source frameworks throughout my career as a software developer and have always wanted to contribute back. However, I was not able to come up with a good problem to solve, until now. You already know from the heading — it’s a full fledged completely native iOS editor framework.

我一直被我们所有软件开发人员所喜欢的巨大的开源社区着迷。 人们出于解决问题或使一件伟大的事情变得更好的热情而产生了一些伟大的框架。 在我作为软件开发人员的整个职业生涯中，我使用了许多开放源代码框架，并且一直希望自己能有所贡献。 但是，直到现在，我还没有想出要解决的好问题。 您已经从标题中知道了-这是一个成熟的完全本机的iOS编辑器框架。

We use rich text editors almost all the time without even realizing — like I am using an editor on Medium to write this story. I am using features like adding headings, links, images etc. but I am thinking about the content, not about how to add all these formatting. In my experience as a developer, I have found numerous web based Rich Text Editors, however not many as feature rich on iOS. So that’s why, I thought of building one.

我们几乎一直都在使用富文本编辑器，甚至没有意识到-就像我在Medium上使用编辑器来编写这个故事一样。 我正在使用添加标题，链接，图像等功能，但是我正在考虑内容，而不是如何添加所有这些格式。 以开发人员的经验，我发现了许多基于Web的富文本编辑器，但是在iOS上没有那么丰富的功能。 因此，我想到了建立一个。

介绍 (Introduction)

It always seemed like a very interesting technical challenge to solve to be able to come up with a capable and extensible editor on iOS. While it is possible to have a web based editor running on iOS and which just works there are a few things which are not as simple to handle in a non-native technology. My inclination towards native editor is driven by the fact that there are so many native features like Dynamic Font sizing and theming which are relatively easy to implement in native but can be very challenging when using web based technologies as a native solution (hybrid).

解决在iOS上能够提供功能强大且可扩展的编辑器似乎总是一个非常有趣的技术挑战。 尽管可以在iOS上运行基于Web的编辑器并且可以正常工作，但有些事情在非本机技术中不那么容易处理。 我之所以倾向于本机编辑器，是因为这样一个事实，即像Dynamic Font sizing和theming这样的许多本机功能相对容易在本机中实现，但是在将基于Web的技术用作本机解决方案(混合)时可能会非常具有挑战性。

要求 (Requirements)

Instead of creating a Rich Text Editor that can just serve as a drag-drop component, I wanted to come up with a framework that can help any one create a Rich Text Editor. The primary reason for this was that I wanted people to be able to add any feature that they need and not be driven or restricted by what is provided out of the box.

我想创建一个可以帮助任何人创建Rich Text Editor的框架，而不是创建只能用作拖放组件的Rich Text Editor。 这样做的主要原因是我希望人们能够添加他们需要的任何功能，而不受开箱即用的功能的驱动或限制。

At a high level, the requirements that I wanted to cater were:

在较高的层次上，我想要满足的要求是：

• Be a standalone component — in its simplest form, it should be a straight replacement of UITextView and in its most complex form, it should be able to handle any functionality that can be expected out of a capable rich text editor.

  作为一个独立的组件-以最简单的形式，它应该是UITextView的直接替代品，并且以最复杂的形式，它应该能够处理功能强大的富文本编辑器可以预期的任何功能。

• Should be extensible to support adding any view as content in the Editor such that it flows with the text.应该是可扩展的，以支持在编辑器中将任何视图添加为内容，使其随文本一起流动。
• Resizing of content views should automatically resize the containing Editor and support this to nth nesting level.调整内容视图的大小应自动调整包含的编辑器的大小，并将其支持到第n个嵌套级别。
• Should support extending the appearance of text as the content is typed — for e.g. changing text as it is typed using mark-up syntax or highlighting as typeahead character is entered — and yet, not be aware of any of these requirements directly.应该支持在键入内容时扩展文本的外观(例如，使用标记语法键入文本时更改文本，或者在输入预输入字符时突出显示文本)，但不要直接意识到这些要求。
• Should allow for working on multiple editors through the same toolbar based on where the focus is.应该允许根据焦点所在的位置通过同一工具栏来使用多个编辑器。
• Respect the bounds of the container i.e. resize to change when the device orientation changes.尊重容器的边界，即当设备方向发生变化时调整大小以进行更改。
• Support a default font and styling like alignment and head indentation.支持默认字体和样式，例如对齐和头部缩进。
• And of course, support all this on macOS Catalyst as well with almost no additional effort.当然，几乎无需额外的努力即可在macOS Catalyst上支持所有这些功能。

框架诞生了 (A framework is born)

With all these requirements in my mind, I started working on a framework and in about 3 months, I had a working version that catered to almost all the initial requirements. I called it Proton — something that brings about positivity for developers that use it and for their end users using the great apps by these developers!

考虑到所有这些要求之后，我开始研究框架，并在大约3个月的时间内找到了可以满足几乎所有初始要求的工作版本。 我称它为Proton ，它为使用它的开发人员以及使用这些开发人员出色应用程序的最终用户带来积极性！

Proton is composed of following key components:

质子由以下关键组件组成：

编辑 (Editor)

To allow for all the points listed above, Editor introduces some key concepts. These concepts allow for extending the Editor at various levels — even in ways that I have not explicitly designed the Editor framework for as we will see later.

为了顾及上面列出的所有要点，Editor引入了一些关键概念。 这些概念允许将编辑器扩展到各个级别，即使我没有明确设计编辑器框架的方式也可以使用，我们将在后面看到。

* All screen captures shown below are from iOS simulator.

* 下面显示的所有屏幕截图均来自iOS模拟器。

附件 (Attachments)

One of the most basic concepts of Editor is Attachments. Attachments are what allow Editor to have any view within Editor text. With support of Attachments, Editor can contain an emoji, a panel or even a table as long as it can be represented as a UIView. An Editor can contain another Editor as well.

附件是最基本的编辑器概念之一。 附件使编辑器在编辑器文本中具有任何视图。 借助附件的支持，编辑器可以包含表情符号，面板甚至表格，只要它可以表示为UIView 。 一个Editor也可以包含另一个Editor 。

There are five types of Attachments which are provided out of the box:

附件提供了五种类型的附件：

• Matching content: An attachment that automatically resizes based on the size of the content i.e. as the content changes, the size of attachment changes to match that.

  匹配内容：附件会根据内容的大小自动调整大小，即随着内容的更改，附件的大小也会随之更改以匹配内容。

• Full width: An attachment that always takes the full width available in its container. If the width of container changes, the width of attachment would change to match that.

  全宽：附件始终采用其容器中可用的全宽。 如果容器的宽度发生变化，则附件的宽度也会发生变化以匹配该宽度。

• Fixed width: An attachment that always respects a configurable fixed width.

  固定宽度：始终遵循可配置的固定宽度的附件。

• Width range: An attachment that always retains a minimum width even when empty but only grows up to the given maximum width.

  宽度范围：即使是空的附件也始终保持最小宽度，但只会增长到给定的最大宽度。

• Percent width: An attachment that always takes up a certain percentage width of the container. As the container size changes, the size of attachment should change to respect the percentage that is used to create the attachment.

  宽度百分比：附件始终占据容器的一定百分比宽度。 随着容器大小的更改，附件的大小也应更改以尊重用于创建附件的百分比。

All these examples use a text view that is added as an attachment in the main editor. You can add any view inside attachment and apply the sizing rule that fits best for your scenario.

所有这些示例均使用文本视图作为附件添加到主编辑器中。 您可以在附件内添加任何视图，并应用最适合您的方案的大小调整规则。

Creating any of these attachments is just a few lines of code:

创建任何这些附件仅需几行代码：

指令 (Commands)

Besides adding different kinds of views as content, an editor should allow to change content attributes as well as contents based on user interaction. For e.g. a user might want to select some text to make it bold or select some text and put that in a Panel. All such interactions which change the appearance attributes of the text in the editor or the content in the Editor based on user’s interaction are made possible by Commands.

除了添加不同类型的视图作为内容之外，编辑器还应允许根据用户交互来更改内容属性以及内容。 例如，用户可能想要选择一些文本使其变为粗体，或者选择一些文本并将其放在面板中。 通过Commands可以进行所有这样的交互，这些交互会基于用户的交互来更改编辑器中文本或编辑器中内容的外观属性。

A command can be executed directly on a given Editor or be passed on to Command Executor so that it is automatically run on the Editor that has the focus.

命令可以直接在给定的编辑器上执行，也可以传递给Command Executor，以便在具有焦点的编辑器上自动运行。

Proton allows you to add your own commands, that you can add logic to, to carry out tasks like the ones shown above. For text formatting, Proton already provide a base class that can be extended to add any Font Traits supported by iOS.

Proton允许您添加自己的命令(可以向其中添加逻辑)来执行上述任务。 对于文本格式， Proton已经提供了一个基类，可以扩展该基类以添加iOS支持的任何字体特征 。

Creating a command for making text bold is as simple as:

创建使文本加粗的命令很简单：

Executing a command is just another line of code which can be invoked on click of a button:

执行命令只是另一行代码，单击按钮即可调用该代码：

BoldCommand().execute(on: editor)

Based on your logic, a command can work on the selected text or the entire Editor.

根据您的逻辑，命令可以对所选文本或整个编辑器起作用。

指挥官 (Command Executor)

A Command Executor allows you to execute the given command on any Editor that has the focus. This comes in handy if you have an attachment that contains an editor, and the command can be executed on both the main editor containing the attachment as well as the editor inside the attachment. It abstracts away the complexity of knowing which Editor the user is trying to run the command on. This is made possible by another concept called Context which binds the Editor to the Command Executor. All the Editors sharing the same context as the Command Executor will automatically be linked with Command Executor.

Command Executor允许您在具有焦点的任何编辑器上执行给定命令。 如果您的附件包含一个编辑器，这将很方便，并且可以在包含附件的主编辑器以及附件内部的编辑器上执行命令。 它消除了知道用户试图在哪个编辑器上运行命令的复杂性。 这可以通过另一个称为Context概念来实现，该概念将编辑器绑定到命令执行器。 与命令执行器共享相同上下文的所有编辑器将自动与命令执行器链接。

语境 (Context)

A Context acts like a key to link between Command Executor and an Editor. A Context allows you to link multiple Editors with the same Command Executor. This can be useful in the scenarios where you have multiple Toolbars acting on one or more Editors i.e. Editor contained inside an Attachments and then added to another Editor.

上下文就像在命令执行器和编辑器之间链接的键一样。 上下文使您可以将多个编辑器与同一命令执行器链接。 这在您有多个工具栏作用于一个或多个编辑器的情况下很有用，例如，将“编辑器”包含在“附件”中，然后添加到另一“编辑器”中。

文字处理器 (Text Processors)

An editor does not only require making changes on explicit user interactions, but also as the user is changing the text. One such example is a Type-ahead where the text is highlighted in blue as the trigger character is entered. Another example is when a user tries to use markup syntax to format the text as they type opening and closing markers.

编辑器不仅需要对显式用户交互进行更改，而且还需要在用户更改文本时进行更改。 一个这样的示例是“预输入”，其中在输入触发字符时，文本以蓝色突出显示。 另一个示例是当用户在键入打开和关闭标记时尝试使用标记语法来设置文本格式。

Text Processors also allow setting the priority. An Editor may register multiple Text Processors. Whenever the text changes inside the Editor, all the registered Text Processors get an opportunity to change the text or add attributes as required.

文本处理器还允许设置优先级。 编辑器可以注册多个文本处理器。 每当在编辑器中更改文本时，所有已注册的文本处理器都会有机会根据需要更改文本或添加属性。

Text Processors are given the opportunity to change text/attributes based on their respective priorities. The priority runs from High to Low and all the subsequent processors gets the text as changed by the processor that ran before it i.e. a processor will always get the updated text. This also allows to combine the effects from multiple Text Processors, if required. Besides high, medium and low, the Text Processor also has a priority called exclusive. If an Exclusive Text Processor is run, it prevents all the other Processors from executing. Instead, it notifies the other Processor that their processing has been interrupted so that the Processors can run any cleanup code, if required.

文本处理器有机会根据其各自的优先级来更改文本/属性。 优先级从高到低运行，并且所有后续处理器都将获得由其之前运行的处理器更改的文本，即，处理器将始终获取更新的文本。 如果需要，这还允许组合来自多个文本处理器的效果。 除了high ， medium ， low ，文本处理器还具有称为exclusive的优先级。 如果运行专用文本处理器，它将阻止所有其他处理器执行。 相反，它通知另一个处理器其处理已中断，以便这些处理器可以运行任何清除代码(如果需要)。

Just like Commands, you can add your own text processors to carry out the functionality like ones shown above.

就像命令一样，您可以添加自己的文本处理器来执行上述功能。

渲染器 (Renderer)

A Renderer always goes hand in hand with the Editor. Relation between Renderer and Editor is just same as that of UILabel and UITextView — it’s just a lot more powerful. In its simplest form, a Renderer is nothing but a read-only Editor. However, to provide an API that is easy to use and looks natural, Renderer encapsulated Editor and exposes its own set of features which are more suited to a Renderer. For e.g. having a TextProcessor would not make sense in the Renderer since the user cannot really type content inside the Renderer. However, Commands may be required to provide functionality like highlighting the text in the Renderer.

渲染器始终与编辑器并驾齐驱。 Renderer和Editor之间的关系与UILabel和UITextView之间的关系相同—它的功能要强大得多。 在最简单的形式中，渲染器不过是只读的编辑器。 但是，为了提供易于使用且看起来自然的API，Renderer封装了Editor，并公开了自己的一组更适合Renderer的功能。 例如，由于用户无法真正在渲染器内键入内容，因此在渲染器中使用TextProcessor毫无意义。 但是，可能需要命令提供一些功能，例如在渲染器中突出显示文本。

By virtue of the Editor, Renderer gains features like inspecting contents and scrolling to a given range. Both these capabilities can be used to create a feature like Find text.

借助编辑器，渲染器获得了诸如检查内容和滚动到给定范围之类的功能。 这两种功能均可用于创建“查找文本”之类的功能。

Creating this command is just another few lines — thanks to the helper functions that Proton provides:

只需几行即可创建此命令-感谢Proton提供的帮助程序功能：

A recent addition to Proton is ListCommand and ListTextProcessor that takes care of all the formatting that you might want to have for creating lists in ` UITextView. To read more about lists, head over to Lists in UITextView.

Proton最近新增了ListCommand和ListTextProcessor ，它可以处理在UITextView创建列表可能需要的所有格式。 要了解有关列表的更多信息，请转到UITextView中的列表。

故事还在继续…… (And the story continues…)

I plan to continue evolving Proton and add more features that I already have in my mind. I hope you have enjoyed reading about it and ready to take Proton out for a spin.

我计划继续发展Proton，并增加我已经想到的更多功能。 我希望您喜欢阅读它，并准备带Proton兜风。

I would love to hear from you. Please feel free to share your comments/thoughts and any feature requests in comments section.

我希望收到您的来信。 请随时在评论部分中分享您的评论/想法和任何功能要求。