Flutter富文本编辑器插件flutter_styling_text_editor的使用

Flutter Styling Text Editor 是一个轻量级的包，允许你在 Flutter 应用程序中轻松编辑和预览富文本。该插件支持所有平台。 该包提供了一个可定制的文本编辑器，用户可以在其中应用样式如 粗体、斜体 和 下划线。一旦文本被设置样式，你可以将其保存为数据库以便稍后使用或进一步处理。这个包非常适合需要输入和管理富文本内容的管理员面板。

特性

• 支持富文本编辑，包括 加粗、斜体 等样式。
• 可以保存富文本结果供以后使用（例如存储在数据库中）。
• 直接从变量中使用富文本结果，无需保存。
• 使用单独的小部件 StyledTextPreview 预览富文本。
• 简单且易于集成到任何 Flutter 项目中。

开始使用

要使用此包，在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter_styling_text_editor: ^1.0.1  

然后运行：

flutter pub get

示例用法

以下是使用 StyledTextEditor 和 StyledTextPreview 小部件的示例：

1. 导入包

import 'package:flutter_styling_text_editor/flutter_styling_text_editor.dart';

2. 创建文本编辑器

使用 StyledTextEditor 创建一个可定制的文本编辑器，用户可以在此输入他们的富文本。

final TextEditingController _textController = TextEditingController();
String _finalStyledText = ''; // 存储生成的富文本

StyledTextEditor(
  controller: _textController,
  onTextChange: (result) {
    setState(() {
      _finalStyledText = result;  // 最终结果将存储在这里
    });
  },
);

3. 保存富文本或直接使用结果

你可以将 _finalStyledText 存储到数据库（本地存储或云数据库）以备后用，或者直接在应用程序中使用它。

A. 保存到数据库

以下是如何将生成的文本保存到数据库（例如 SQLite）的示例：

// 函数用于将富文本保存到数据库
Future<void> _saveToDatabase(String styledText) async {
  await DatabaseHelper.instance.insertStyledText(styledText); // 你的数据库逻辑
}

// 富文本编辑器
StyledTextEditor(
  controller: _textController,
  onTextChange: (result) {
    setState(() {
      _finalStyledText = result;
    });
  },
);

// 用户点击按钮时保存
ElevatedButton(
  onPressed: () {
    _saveToDatabase(_finalStyledText);  // 将富文本保存到数据库
  },
  child: Text('保存富文本'),
);

B. 直接从变量中使用

你也可以直接从变量中使用 _finalStyledText，而无需将其保存到数据库，如果想立即显示或处理它，可以使用 StyledTextPreview 小部件来渲染它。

// 预览富文本
StyledTextPreview(
  text: _finalStyledText,  // 显示富文本
  fontColor: Colors.black,
  fontSize: 16,
);

4. 检索并预览富文本

当你需要显示富文本时，从数据库检索存储的文本，并使用 StyledTextPreview 小部件进行渲染。

String _retrievedStyledText = ''; // 从数据库检索的富文本

// 函数用于从数据库检索富文本
Future<void> _getFromDatabase() async {
  String result = await DatabaseHelper.instance.getStyledText();  // 数据库检索逻辑
  setState(() {
    _retrievedStyledText = result;
  });
}

// 预览富文本
StyledTextPreview(
  text: _retrievedStyledText,  // 显示富文本
  fontColor: Colors.black,
  fontSize: 16,
);

完整示例

StyledTextEditor 允许你输入富文本，并输出最终的富文本结果，这种结果可以用 Markdown 样式语法表示。这个最终结果可以存储在数据库或任何持久化存储中。

import 'package:flutter/material.dart';
import 'package:flutter_styling_text_editor/flutter_styling_text_editor.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '富文本编辑器',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final _textController = TextEditingController(); // 文本编辑器控制器
  String _finalStyledText = ''; // 这将保存最终的富文本

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Center(
            child: StyledTextEditor(
              controller: _textController, // 文本输入控制器
              backgroundColor: Colors.grey[300], // 编辑器背景颜色
              boarderRadius: 10, // 整个 StyledTextEditor 的边框圆角
              textEditorColor: Colors.white, // StyledTextEditor 的颜色
              textColor: Colors.black, // 编辑器内部的文字颜色
              fontSize: 16, // 文字大小
              fontFamily: '', // 字体族（空表示使用默认字体）
              onTextChange: (result) {
                setState(() {
                  _finalStyledText = result; // 当用户输入时更新富文本
                });
              },
            ),
          ),

          // 在预览小部件中显示富文本
          StyledTextPreview(
            text: _finalStyledText, // 要显示的富文本
            fontColor: Colors.black, // 预览的字体颜色
            fontFamily: '', // 预览的字体族
            fontSize: 16, // 预览的文字大小
          ),
        ],
      ),
    );
  }
}

使用场景

• 管理员面板：管理员可以使用 StyledTextEditor 输入富文本并保存到后端。稍后，可以使用 StyledTextPreview 在客户端上显示这些富文本。
• 内容管理系统 (CMS)：该包适用于任何需要富文本编辑和格式化文本预览的应用程序，如博客、新闻平台或教育应用。