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

简介

wysiwyg_editor 是一个用于增强和定制 Flutter Quill 富文本编辑器功能的插件。它基于流行的 flutter_quill 插件，并提供了额外的自定义选项，使开发者能够更进一步地调整编辑器的行为和外观。

功能

• 增强工具栏定制：支持对工具栏进行高度自定义。
• 扩展格式选项：提供更多文本格式化选项。
• 可定制的图标和样式：可以更改编辑器控件的图标和样式。
• 个性化主题与配色方案：为用户提供个性化的编辑体验。

安装

在项目的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  wysiwyg_editor: ^[version]

替换 [version] 为你需要的版本号。

完成后，运行以下命令以安装依赖：

flutter pub get

使用示例

以下是一个完整的示例，展示如何使用 wysiwyg_editor 插件创建一个简单的富文本编辑器。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 富文本编辑器示例'),
        ),
        body: EditorPage(),
      ),
    );
  }
}

class EditorPage extends StatefulWidget {
  [@override](/user/override)
  _EditorPageState createState() => _EditorPageState();
}

class _EditorPageState extends State<EditorPage> {
  final controller = EditorController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: WysiwygEditor(
            controller: controller,
            placeholder: '请输入内容...',
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () {
                // 获取当前编辑器内容
                String content = controller.getValue().document.toPlainText();
                print('编辑器内容: $content');
              },
              child: Text('获取内容'),
            ),
            ElevatedButton(
              onPressed: () {
                // 清空编辑器内容
                controller.clear();
              },
              child: Text('清空内容'),
            ),
          ],
        ),
      ],
    );
  }
}