简介
我在寻找一个iOS上的所见即所得文本编辑器,发现了一些解决方案,但它们都没有使用WKWebView
。苹果将不再接受使用UIWebView API的应用程序的提交。我找到一个HTML5富文本编辑器,它提供了一个强大且轻量级的跨浏览器标准化。因此,我构建了这个项目和iOS的桥接器,该桥接器用于在WKWebView的Swift和JavaScript之间发送消息。
示例
要运行示例项目,请克隆仓库,然后从示例目录打开SQRichTextEditor.xcworkspace
。
要求
- 部署目标iOS 10.0+
- Swift 5+
- Xcode 11+
安装
SQRichTextEditor可以通过CocoaPods获取。要安装它,只需将以下行添加到您的Podfile中。
pod 'SQRichTextEditor'
特性
- 粗体
- 斜体
- 下划线
- 删除线
- 插入图片
- 插入HTML
- 创建链接
- 文字颜色
- 文字大小
- 文字背景颜色
入门指南
SQTextEditorView
是UIView的子类,因此您可以将其用于您需要的任何地方。
import SQRichTextEditor
private lazy var editorView: SQTextEditorView = {
/// You can pass the custom css string, if you want to change the default editor style
/// var customCss: String?
/// if let cssURL = Bundle.main.url(forResource: isDarkMode ? "editor_dark" : "editor_light", withExtension: "css"),
/// let css = try? String(contentsOf: cssURL, encoding: .utf8) {
/// customCss = css
/// }
/// let _editorView = SQTextEditorView(customCss: customCss)
let _editorView = SQTextEditorView()
_editorView.translatesAutoresizingMaskIntoConstraints = false
return _editorView
}()
view.addSubview(editorView)
editorView.topAnchor.constraint(equalTo: collectionView.bottomAnchor, constant: 10).isActive = true
editorView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 10).isActive = true
editorView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -10).isActive = true
editorView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
代理
您可以通过实现SQTextEditorDelegate来检查事件。
editorView.delegate = self
代理具有以下功能
//Called when the editor components is ready.
optional func editorDidLoad(_ editor: SQTextEditorView)
//Called when the user selected some text or moved the cursor to a different position.
optional func editor(_ editor: SQTextEditorView,
selectedTextAttributeDidChange attribute: SQTextAttribute)
//Called when the user inserted, deleted or changed the style of some text.
optional func editor(_ editor: SQTextEditorView,
contentHeightDidChange height: Int)
//Called when the user tapped the editor
optional func editorDidFocus(_ editor: SQTextEditorView)
//Called when the user tapped the done button of keyboard tool bar
optional func editorDidTapDoneButton(_ editor: SQTextEditorView)
//Called when the editor cursor moved
optional func editor(_ editor: SQTextEditorView, cursorPositionDidChange position: SQEditorCursorPosition)
编辑器功能
getHTML
返回编辑器当前状态下的HTML值。
func getHTML(completion: @escaping (_ html: String?) -> ())
insertHTML
在当前光标位置插入HTML片段,或者如果选中则替换选中内容。提供的值应不包含标签或其他内容。在脚本评估完成或失败时调用的块。
func insertHTML(_ html: String, completion: ((_ error: Error?) -> ())? = nil)
getSelectedText
当前在编辑器中选中的文本。
func getSelectedText(completion: @escaping (_ text: String?) -> ())
bold
将当前选中的非加粗文本转换为加粗(通过使用'b'标签包裹),否则从选中的文本中移除加粗格式。一个在脚本评估完成或失败时将被调用的块。
func bold(completion: ((_ error: Error?) -> ())? = nil)
italic
通过用'i'标签包裹它。
func italic(completion: ((_ error: Error?) -> ())? = nil)
underline
通过用'u'标签包裹它。
func underline(completion: ((_ error: Error?) -> ())? = nil)
strikethrough
通过用'del'标签包裹它。
func strikethrough(completion: ((_ error: Error?) -> ())? = nil)
setTextColor
设置选中文本的颜色。
func setText(color: UIColor, completion: ((_ error: Error?) -> ())? = nil)
setTextBackgroundColor
设置选中文本背景的颜色。
func setText(backgroundColor: UIColor, completion: ((_ error: Error?) -> ())? = nil)
setTextSize
设置选中文本的字体大小。
func setText(size: Int, completion: ((_ error: Error?) -> ())? = nil)
insertImage
在当前光标位置插入图片。当脚本评估完成或失败时调用的块。
func insertImage(url: String, completion: ((_ error: Error?) -> ())? = nil)
makeLink
将当前选中的文本设置为链接。如果没有选中文本,则将URL或电子邮件作为文本插入到当前光标处并将其设置为链接。当脚本评估完成或失败时调用的块。
func makeLink(url: String, completion: ((_ error: Error?) -> ())? = nil)
removeLink
移除任何至少部分选中的链接。当脚本评估完成或失败时调用的块。
func removeLink(completion: ((_ error: Error?) -> ())? = nil)
clear
清除编辑器内容。该方法移除所有块并插入新的初始空块 <div><br></div>
。当脚本评估完成或失败时调用的块。
func clear(completion: ((_ error: Error?) -> ())? = nil)
focus
编辑器获得或失去焦点。
func focus(_ isFocused: Bool, completion: ((_ error: Error?) -> ())? = nil)
贡献
SQRichTextEditor
欢迎修复、改进和功能添加。如果您想贡献,请提交带详细更改说明的拉取请求。
如果您想为 editor.js
或 editor.css
添加或修复一些功能,您可以在以下仓库中提交拉取请求。
作者
林宇伟,[邮箱保护] @ OneupNetwork
许可证
SQRichTextEditor 在 MIT 许可下可用。有关更多信息,请参阅 LICENSE 文件。
归属权
SQRichTextEditor
使用了以下强大源代码的一部分
组件 | 描述 | 许可证 |
---|---|---|
Squire | Squire 是一个 HTML5 丰富文本编辑器,它在一个灵活轻盈的包中提供了强大的跨浏览器规范化。 | MIT |
EFColorPicker | Swift 中的轻量级颜色选择器。 | MIT |