Tiptap（适用于移动应用程序）

git clone https://github.com/ueberdosis/tiptap-mobile-bridge
cd tiptap-mobile-bridge/web && npm install && npm run build  # builds the editor bundle and copies it into the example apps
cd ../flutter_example && flutter run                         # or ../ios_example, ../android_example, ../react_native_example

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

let editor = null

// The native side calls this to send a command in.
window.tiptapBridge = {
  handleCommand: (json) => onCommand(JSON.parse(json)),
}

// Post a message out to the native side (see "Connect your native app").
function send(message) {
  // e.g. window.flutter_inappwebview.callHandler('tiptapBridge', JSON.stringify(message))
}

function onCommand(command) {
  // `init` is the first command: create the editor with the host's content.
  if (command.name === 'init') {
    editor = new Editor({
      element: document.querySelector('#editor'),
      extensions: [StarterKit], // use the same extensions as your web editor
      content: command.params?.content ?? '<p>Hello from Tiptap 👋</p>',
      editable: command.params?.editable !== false,
    })
    // register your event forwarders here (see "Receive any event" and "Drive a native toolbar")
    send({ type: 'response', id: command.id, ok: true })
    return
  }

  // The commands below run against the editor created here.
}

{
  "type": "command",
  "id": "1",
  "name": "exec",
  "params": { "command": "toggleHeading", "args": [{ "level": 2 }] }
}

// inside onCommand(command), after the init branch:
if (command.name === 'exec') {
  const { command: name, args = [] } = command.params
  if (typeof editor.commands[name] !== 'function') {
    const error = { code: 'UNKNOWN_COMMAND', message: `no such command: ${name}` }
    send({ type: 'response', id: command.id, ok: false, error })
    return
  }
  const executed = editor
    .chain()
    .focus()
    [name](...args)
    .run()
  send({ type: 'response', id: command.id, ok: true, result: { executed } })
}

const subscriptions = new Set()

// Add a subscribe branch to onCommand so the host can opt into events:
if (command.name === 'subscribe') {
  subscriptions.add(command.params.event)
  send({ type: 'response', id: command.id, ok: true })
}

// Register the forwarders once, when the editor is created in the init branch:
for (const name of ['focus', 'blur', 'update', 'selectionUpdate', 'transaction']) {
  editor.on(name, () => {
    if (subscriptions.has(name)) {
      send({ type: 'event', name, payload: project(name) })
    }
  })
}

function project(name) {
  if (name === 'update' || name === 'selectionUpdate' || name === 'transaction') {
    const { from, to, empty } = editor.state.selection
    return { selection: { from, to, empty } }
  }
  return {} // focus, blur
}

// getJSON / getHTML are commands like any other: run, then reply with the document
if (command.name === 'getJSON') {
  send({ type: 'response', id: command.id, ok: true, result: editor.getJSON() })
}

// one entry per button your toolbar renders
function toolbarState() {
  return {
    bold: { isActive: editor.isActive('bold'), canExec: editor.can().toggleBold() },
    italic: { isActive: editor.isActive('italic'), canExec: editor.can().toggleItalic() },
    // nodes pass attributes, e.g. editor.isActive('heading', { level: 2 })
  }
}

// register alongside the other forwarders when you create the editor:
editor.on('selectionUpdate', () => {
  const { from, to, empty } = editor.state.selection
  send({
    type: 'event',
    name: 'selectionChanged',
    payload: { selection: { from, to, empty }, commandStates: toolbarState() },
  })
})

const pending = new Map()
let nextRequestId = 1

// Ask the host to do something, and await its reply.
function hostRequest(name, params) {
  const id = `r${nextRequestId++}`
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      pending.delete(id)
      reject(new Error(`host request timed out: ${name}`))
    }, 30000)
    pending.set(id, { resolve, reject, timer })
    send({ type: 'hostRequest', id, name, params })
  })
}

// The native side delivers the host's answer here.
window.tiptapBridge.handleReply = (json) => {
  const { id, ok, result, error } = JSON.parse(json)
  const entry = pending.get(id)
  if (!entry) return
  clearTimeout(entry.timer)
  pending.delete(id)
  ok ? entry.resolve(result) : entry.reject(error)
}

const url = await hostRequest('uploadImage', { dataUrl })
editor.chain().focus().setImage({ src: url }).run()

final _pending = <String, Completer<Object?>>{};
int _nextId = 1;

// inbound: app to editor. Returns a future that completes with the response.
Future<Object?> send(String name, [Map<String, dynamic>? params]) {
  final id = '${_nextId++}';
  final completer = Completer<Object?>();
  _pending[id] = completer; // resolved when the response with this id arrives
  final command = {'type': 'command', 'id': id, 'name': name, if (params != null) 'params': params};
  // double-encode so the JSON is a valid JS string argument
  controller.evaluateJavascript(
    source: 'window.tiptapBridge.handleCommand(${jsonEncode(jsonEncode(command))})',
  );
  return completer.future;
}

// outbound: editor to app. Route responses, events, and host requests.
controller.addJavaScriptHandler(
  handlerName: 'tiptapBridge',
  callback: (args) {
    final message = jsonDecode(args.first as String) as Map<String, dynamic>;
    if (message['type'] == 'response') {
      final completer = _pending.remove(message['id']);
      message['ok'] == true
          ? completer?.complete(message['result'])
          : completer?.completeError(message['error']);
    }
    // 'event' and 'hostRequest' are handled here too (see tiptap_bridge.dart)
  },
);

// outbound: the editor calls window.webkit.messageHandlers.tiptapBridge.postMessage(json)
config.userContentController.add(self, name: "tiptapBridge")

// inbound
webView.evaluateJavaScript("window.tiptapBridge.handleCommand(\(jsStringLiteral))")

// outbound: the editor calls window.AndroidTiptapBridge.postMessage(json)
webView.addJavascriptInterface(object {
  @JavascriptInterface fun postMessage(json: String) = bridge.handle(json)
}, "AndroidTiptapBridge")

// inbound
webView.evaluateJavascript("window.tiptapBridge.handleCommand(${JSONObject.quote(json)})", null)

// outbound: the editor calls window.ReactNativeWebView.postMessage(json), delivered to the onMessage
// prop, which MUST be set, or react-native-webview never injects window.ReactNativeWebView and the
// editor can't detect the platform.
function EditorWebView() {
  return (
    <WebView
      source={{ html }}
      originWhitelist={['*']}
      onMessage={(e) => bridge.handleMessage(e.nativeEvent.data)}
    />
  )
}

// inbound
webviewRef.current?.injectJavaScript(`window.tiptapBridge.handleCommand(${jsStringLiteral}); true;`)