EditorJSKit 0.3.0

EditorJSKit 0.3.0

Upstarts 维护。




  • Upstarts

Version License Platform

关于

这是一个非官方的 iOS 框架,用于Editor.js - 块样式编辑器。它的目的是简化块的渲染和解析。

将如下干净的 JSON 块数据转换成如下本地区视图👇

支持块

  • 🎩标题
  • 🥑原始 HTML
  • 📷图像
  • 🖌分隔符
  • 💌段落
  • 🕸链接
  • 🌿列表

待办事项

  • 📋表格块支持
  • UITableView 渲染
  • 有关如何应用自定义样式的文档
  • 有关如何创建自定义块的文档
  • 有关如何创建自定义渲染器的文档

开发者注意事项

本质上,该工具套件是在多个抽象级别构建的。它非常方便,因为它提供了一种自定义清理 JSON 数据渲染行为和添加自定义块的能力。

请注意,该框架包含一种基于协议的工具,可以用于实现自己的适配器、渲染器和自定义块。这些功能尚未进行文档记录,我们正在努力工作。

用法

目前我们只支持在 UICollectionView 内进行区块渲染。如果你的集合视图仅包含 EJ 区块,请使用 EJCollectionViewAdapter,它封装了集合的 dataSource 和 delegate,使用起来非常简单。

以下是使用 EJCollectionViewAdapter 的示例

  1. 创建实例
let kit = EJKit.shared
  1. 将你的数据解码为 EJBLockList(JSON 块数组)
let blockList = try kit.decode(data: data)
  1. 在你的 ViewController 中创建一个 collectionView
lazy var collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: UICollectionViewFlowLayout())
  1. 创建适配器
lazy var adapter = EJCollectionViewAdapter(collectionView: collectionView)
  1. 确认给 EJCollectionDataSource 并在 data 变量中返回解析后的块。
extension ViewController: EJCollectionDataSource {
    var data: EJBlocksList? { blockList }
}
  1. 将你的 ViewController 分配给适配器的 dataSource
override func viewDidLoad() {
    super.viewDidLoad()
    adapter.dataSource = self
}

如果你想要混合使用 EJ 区块和其他单元格,可以使用 EJCollectionRenderer。它提供了更高的灵活性,下面是如何使用它的示例

  1. 重复上述步骤 1-3

  2. 创建一个渲染器

lazy var renderer = EJCollectionRenderer(collectionView: collectionView)
  1. 实现并分配集合的数据源和代理方法。
///
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'

作者

Upstarts 团队

Vadim Popov - 架构、实现、代码审查

Ivan Glushko - 实现