关于
这是一个非官方的 iOS 框架,用于Editor.js - 块样式编辑器。它的目的是简化块的渲染和解析。
将如下干净的 JSON 块数据此转换成如下本地区视图
支持块
🎩 标题🥑 原始 HTML📷 图像🖌 分隔符💌 段落🕸 链接🌿 列表
待办事项
📋 表格块支持UITableView
渲染- 有关如何应用自定义样式的文档
- 有关如何创建自定义块的文档
- 有关如何创建自定义渲染器的文档
开发者注意事项
本质上,该工具套件是在多个抽象级别构建的。它非常方便,因为它提供了一种自定义清理 JSON 数据渲染行为和添加自定义块的能力。
请注意,该框架包含一种基于协议的工具,可以用于实现自己的适配器、渲染器和自定义块。这些功能尚未进行文档记录,我们正在努力工作。
用法
目前我们只支持在 UICollectionView
内进行区块渲染。如果你的集合视图仅包含 EJ 区块,请使用 EJCollectionViewAdapter
,它封装了集合的 dataSource 和 delegate,使用起来非常简单。
以下是使用 EJCollectionViewAdapter
的示例
- 创建实例
let kit = EJKit.shared
- 将你的数据解码为
EJBLockList
(JSON 块数组)
let blockList = try kit.decode(data: data)
- 在你的 ViewController 中创建一个
collectionView
lazy var collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: UICollectionViewFlowLayout())
- 创建适配器
lazy var adapter = EJCollectionViewAdapter(collectionView: collectionView)
- 确认给
EJCollectionDataSource
并在data
变量中返回解析后的块。
extension ViewController: EJCollectionDataSource {
var data: EJBlocksList? { blockList }
}
- 将你的
ViewController
分配给适配器的dataSource
override func viewDidLoad() {
super.viewDidLoad()
adapter.dataSource = self
}
如果你想要混合使用 EJ 区块和其他单元格,可以使用 EJCollectionRenderer
。它提供了更高的灵活性,下面是如何使用它的示例
-
重复上述步骤 1-3
-
创建一个渲染器
lazy var renderer = EJCollectionRenderer(collectionView: collectionView)
- 实现并分配集合的数据源和代理方法。
///
extension ViewController: UICollectionViewDataSource {
/**
*/
func numberOfSections(in collectionView: UICollectionView) -> Int {
return blockList.blocks.count
}
/**
*/
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return blockList.blocks[section].data.numberOfItems
}
/**
*/
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
do {
let block = blockList.blocks[indexPath.section]
let style = kit.style.getStyle(forBlockType: block.type)
return try renderer.render(block: block, indexPath: indexPath, style: style)
}
catch {
// Ensure you won't ever get here
return UICollectionViewCell()
}
}
}
///
extension ViewController: UICollectionViewDelegateFlowLayout {
/**
*/
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
do {
let block = blockList.blocks[indexPath.section]
let style = kit.style.getStyle(forBlockType: block.type)
return try renderer.size(forBlock: block,
itemIndex: indexPath.item,
style: style,
superviewSize: collectionView.frame.size)
} catch {
return .zero
}
}
/**
*/
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return renderer.spacing(forBlock: blockList.blocks[section])
}
/**
*/
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return renderer.insets(forBlock: blockList.blocks[section])
}
}
示例
要运行示例项目,请克隆仓库,然后首先从 Example 目录运行 pod install
。
安装
EditorJSKit 可以通过 CocoaPods 获取。要安装它,只需将以下行添加到你的 Podfile 中
pod 'EditorJSKit'
作者
Vadim Popov - 架构、实现、代码审查
Ivan Glushko - 实现