插件介绍

Simplistic Editor 是一个基于 Flutter 的富文本编辑器示例项目，展示了如何使用 TextEditingDeltas 和 DeltaTextInputClient API 实现精细的文本编辑和样式控制。该插件的核心功能包括：

• 支持文本插入、删除、替换等操作的细粒度控制
• 可扩展的文本样式系统，支持自定义 InlineSpan 替换
• 实时显示文本编辑历史记录，便于调试和理解文本变化
• 实现了格式化工具栏，支持粗体、斜体、下划线等文本样式
• 支持文本样式的扩展功能，即从样式化文本末尾继续输入时保持相同样式

该插件的架构分为三个主要层次：

1. 可视化层：展示文本编辑历史记录
2. 替换层：处理文本样式和范围管理
3. 文本输入层：处理平台文本输入和选择操作

使用步骤

包的引入

由于这是一个自定义修改版本，需要以 Git 形式引入。在您的项目的 pubspec.yaml 文件中添加以下依赖配置：

dependencies:
  simplistic_editor:
    git:
      url: "https://atomgit.com/"
      path: "packages/simplistic_editor/simplistic_editor"

然后运行 flutter pub get 命令获取依赖。

基本使用

以下是一个简单的使用示例：

import 'package:flutter/material.dart';
import 'package:simplistic_editor/replacements.dart';
import 'package:simplistic_editor/basic_text_field.dart';
import 'package:simplistic_editor/formatting_toolbar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simplistic Editor Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late ReplacementTextEditingController _controller;
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _controller = ReplacementTextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simplistic Editor Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 格式化工具栏
            const FormattingToolbar(),
            // 文本输入区域
            Expanded(
              child: BasicTextField(
                controller: _controller,
                style: const TextStyle(fontSize: 18.0),
                focusNode: _focusNode,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

API 调用

核心类和方法

1. TextEditingInlineSpanReplacement

表示一个文本替换规则，用于将指定范围内的文本替换为带有自定义样式的 InlineSpan。

TextEditingInlineSpanReplacement(
  TextRange(start: 0, end: 5),
  (String value, TextRange range) {
    return TextSpan(text: value, style: TextStyle(color: Colors.blue));
  },
  true, // 是否扩展样式
)

参数说明：

• range: 要替换的文本范围
• generator: 生成自定义 InlineSpan 的函数
• expand: 是否从后边缘扩展样式范围

主要方法：

• onDelete(TextEditingDeltaDeletion delta): 处理删除操作时更新替换范围
• onInsertion(TextEditingDeltaInsertion delta): 处理插入操作时更新替换范围
• onReplacement(TextEditingDeltaReplacement delta): 处理替换操作时更新替换范围
• copy({TextRange? range, bool? expand}): 创建替换规则的副本

2. ReplacementTextEditingController

一个扩展的 TextEditingController，用于管理 TextEditingInlineSpanReplacement 列表。

final controller = ReplacementTextEditingController(
  text: 'Hello World',
  replacements: [
    // 替换规则列表
  ],
);

主要属性：

• replacements: 文本替换规则列表
• composingRegionReplaceable: 组合区域是否可替换

主要方法：

• applyReplacement(TextEditingInlineSpanReplacement replacement): 添加替换规则
• syncReplacementRanges(TextEditingDelta delta): 根据文本变化更新替换范围
• buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}): 构建带样式的文本

3. BasicTextField

一个基本的文本输入组件，支持自定义样式和输入处理。

BasicTextField(
  controller: _controller,
  style: TextStyle(fontSize: 18.0),
  focusNode: _focusNode,
)

参数说明：

• controller: 文本编辑控制器
• style: 文本样式
• focusNode: 焦点节点

4. FormattingToolbar

格式化工具栏组件，提供粗体、斜体、下划线等文本样式控制。

const FormattingToolbar()

鸿蒙适配注意事项

1. 文本输入兼容性：确保鸿蒙设备上的文本输入能正确触发 DeltaTextInputClient 的回调方法
2. UI 适配：根据鸿蒙设备的屏幕尺寸和分辨率调整文本框大小和样式
3. 性能优化：在处理大量文本或复杂样式时，注意优化性能，避免卡顿
4. 权限配置：确保应用具有必要的权限，如文件访问权限（如果需要保存编辑内容）

总结

Simplistic Editor 是一个功能强大的富文本编辑示例，展示了 Flutter 中 TextEditingDeltas 和 DeltaTextInputClient API 的高级用法。通过该插件，开发者可以学习如何实现精细的文本编辑控制、自定义文本样式和实时显示编辑历史。

在鸿蒙系统上使用该插件时，需要注意文本输入兼容性和 UI 适配问题。通过正确配置依赖和使用 API，开发者可以快速集成富文本编辑功能到自己的鸿蒙 Flutter 应用中。

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net