从 epubjs-rn 中从 CFI 位置抓取文本

Question

我目前正在开发一个需要从 epub 中获取文本的项目。

我们正在使用 React-Native 和 Futurepress epubjs-rn。

努力实现：

1. 用户通过长按在移动设备上突出显示单词
2. 突出显示的文本是从突出显示的区域中抓取并在应用程序的其他地方使用。

当前的尝试：

我尝试过

onSelected

属性，它返回一个包含所选区域的 CFI 位置的事件，但我无法弄清楚如何从解析的 CFI 位置提取实际文本。

在 epubjs-rn Github 上，推荐

onMarkClicked

解决类似问题，但无法触发。

这是我当前的代码：

import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, Alert , WebView } from "react-native";

import { Epub } from 'epubjs-rn';

const epubCFI = require('./lib/EpubCFI/src/epubcfi');   

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    onLongPress = (event) => {
        console.log("epubCFI.prototype.parse(): " , epubCFI.prototype.parse(event));
        console.log("epubCFI.prototype.getRange(): ", epubCFI.prototype.getRange(event));
    }

    selectText = (event, rendition) => {
        console.log('event', event);

        const parsedEvent = epubCFI.prototype.parse(event);
    }

    render() {

        return (
        <Epub onSelected={(event, rendition) => this.selectText(event, rendition)} 
            onLongPress={this.onLongPress.bind(this)} 
            src={"https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}
            flow="scrolled" />
        )
    }
}

如有任何帮助，我们将不胜感激。谢谢~

Answer 1

您可以使用此代码来获取所选文本

    onSelected={(cfiRange, rendition) => {
      console.log("selected", cfiRange)
      this.state.book.getRange(cfiRange).then(function(range) {
        console.log(`Text: ${range.endContainer.data.substring(range.startOffset, range.endOffset)}`);
      });
    }}

对于书

state

，也在此代码中设置：

  onReady={(book) => {
                        console.log("Metadata", book.package.metadata);
                        console.log("Table of Contents", book.navigation.toc);
                        this.setState({
                            onChangeFirstCall: true,
                            title: book.package.metadata.title,
                            toc: book.navigation.toc,
                            book: book
                        });

Answer 2

使用此功能我们可以轻松地从CFI范围中找到文本

export const getTextFromCFi = async (bookToRender, cfi) => {
  
  
  try {
    const range = await bookToRender?.getRange(cfi);
    return range.toString();
  } catch (error) {
    // Handle error if any
    console.error('Error fetching text from CFi', error);
    return ''; // or handle error accordingly
  }
};

我在React Electron js中使用了这个，它应该可以在React Native中工作，并且他们有一个类似的SDK，这个bookToRender变量来自

bookToRender = ePub(newBookUrl);

这个和epub是从Epub导入的

import ePub from 'epubjs';

如果这在 React 中有效，那么它也应该在 React Native 中有效