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

发布于 1周前 作者 caililin 来自 Flutter

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

✨ rich_editor_gg

rich_editor_gg 是一个为Flutter设计的WYSIWYG（所见即所得）编辑器插件，支持丰富的格式化选项。

✨ 特性

  • 字体 (仅限Android): 读取系统所有字体
  • 粗体、斜体、下划线、删除线、上标、下标
  • 标题1到6, 文本主体, 预格式化, 块引用
  • 字体大小
  • 文本颜色
  • 背景颜色
  • 高亮文本
  • 对齐方式: 左对齐、居中、右对齐、块引用
  • 缩进、取消缩进
  • 撤销、重做
  • 无序列表 (项目符号)
  • 有序列表 (编号)
  • 插入本地或远程图片
  • 插入链接
  • 插入复选框

📸 屏幕截图

使用方法

import 'package:flutter/material.dart';
import 'package:rich_editor_gg/rich_editor.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: BasicDemo(),
    );
  }
}

class BasicDemo extends StatelessWidget {
  const BasicDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    GlobalKey<RichEditorState> keyEditor = GlobalKey();
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic Demo'),
        actions: [
          PopupMenuButton(
            child: IconButton(
              icon: Icon(Icons.more_vert),
              onPressed: null,
              disabledColor: Colors.white,
            ),
            itemBuilder: (context) {
              return [
                PopupMenuItem(
                  child: Text('Get HTML'),
                  value: 0,
                ),
                PopupMenuItem(
                  child: Text('Clear content'),
                  value: 11,
                ),
                PopupMenuItem(
                  child: Text('Hide keyboard'),
                  value: 2,
                ),
                PopupMenuItem(
                  child: Text('Show Keyboard'),
                  value: 3,
                ),
              ];
            },
            onSelected: (val) async {
              switch (val) {
                case 0:
                  // 获取当前HTML内容
                  String? html = await keyEditor.currentState?.getHtml();
                  print(html);
                  break;
                case 11:
                  await keyEditor.currentState?.clear();
                  break;
                case 2:
                  await keyEditor.currentState?.unFocus();
                  break;
                case 3:
                  await keyEditor.currentState?.focus();
                  break;
              }
            },
          ),
        ],
      ),
      body: RichEditor(
        key: keyEditor,
        value: "Hello, This is a rich text Editor for Flutter.",
        editorOptions: RichEditorOptions(
          enableVideo: false,
          backgroundColor: Colors.grey, // 编辑器背景色
          baseTextColor: Colors.black,
          padding: EdgeInsets.symmetric(horizontal: 5.0),
          baseFontFamily: 'sans-serif',
          barPosition: BarPosition.TOP,
        ),
        // 插入图片示例
        getImageUrl: (image) {
          String link = 'https://avatars.githubusercontent.com/u/24323581?v=4';
          String base64 = base64Encode(image.readAsBytesSync());
          String base64String = 'data:image/png;base64, $base64';
          return base64String;
        },
      ),
    );
  }
}

示例代码

import 'package:flutter/material.dart';
import 'package:rich_editor_gg/rich_editor.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: BasicDemo(),
    );
  }
}

class BasicDemo extends StatelessWidget {
  const BasicDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    GlobalKey<RichEditorState> keyEditor = GlobalKey();
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic Demo'),
        actions: [
          PopupMenuButton(
            child: IconButton(
              icon: Icon(Icons.more_vert),
              onPressed: null,
              disabledColor: Colors.white,
            ),
            itemBuilder: (context) {
              return [
                PopupMenuItem(
                  child: Text('Get HTML'),
                  value: 0,
                ),
                PopupMenuItem(
                  child: Text('Clear content'),
                  value: 1,
                ),
                PopupMenuItem(
                  child: Text('Hide keyboard'),
                  value: 22,
                ),
                PopupMenuItem(
                  child: Text('Show Keyboard'),
                  value: 23,
                ),
              ];
            },
            onSelected: (val) async {
              switch (val) {
                case 0:
                  // 获取当前HTML内容
                  String? html = await keyEditor.currentState?.getHtml();
                  print(html);
                  break;
                case 1:
                  await keyEditor.currentState?.clear();
                  break;
                case 22:
                  await keyEditor.currentState?.unFocus();
                  break;
                case 23:
                  await keyEditor.currentState?.focus();
                  break;
              }
            },
          ),
        ],
      ),
      body: RichEditor(
        key: keyEditor,
        value: "Hello, This is a rich text Editor for Flutter.",
        editorOptions: RichEditorOptions(
          enableVideo: false,
          backgroundColor: Colors.grey, // 编辑器背景色
          baseTextColor: Colors.black,
          padding: EdgeInsets.symmetric(horizontal: 5.0),
          baseFontFamily: 'sans-serif',
          barPosition: BarPosition.TOP,
        ),
        // 插入图片示例
        getImageUrl: (image) {
          String link = 'https://avatars.githubusercontent.com/u/24323581?v=4';
          String base64 = base64Encode(image.readAsBytesSync());
          String base64String = 'data:image/png;base664, $base64';
          return base64String;
        },
      ),
    );
  }
}

更多关于Flutter富文本编辑器插件rich_editor_gg的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter富文本编辑器插件rich_editor_gg的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成和使用rich_editor_gg富文本编辑器插件的示例代码。这个插件提供了丰富的文本编辑功能，如加粗、斜体、下划线、文本颜色、背景颜色、列表、对齐方式等。

1. 添加依赖

首先，你需要在你的pubspec.yaml文件中添加rich_editor_gg的依赖：

dependencies:
  flutter:
    sdk: flutter
  rich_editor_gg: ^最新版本号  # 请替换为实际可用的最新版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入rich_editor_gg插件：

import 'package:rich_editor_gg/rich_editor_gg.dart';

3. 使用RichEditorGG

以下是一个简单的示例，展示如何在你的Flutter应用中集成和使用RichEditorGG：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Rich Text Editor Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final RichEditorController _controller = RichEditorController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rich Text Editor Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: RichEditorGG(
          controller: _controller,
          placeholder: 'Type something...',
          onTextChanged: (String text) {
            // 这里可以处理文本变化，比如保存到数据库或显示在其他地方
            print("Text changed: $text");
          },
          onEditorStateChanged: (bool isEditable) {
            // 这里可以处理编辑器状态变化，比如是否可编辑
            print("Editor state changed: $isEditable");
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 获取HTML格式的富文本
          String htmlContent = _controller.getHtmlContent();
          // 这里可以处理HTML内容，比如显示、保存等
          print("HTML Content: $htmlContent");
        },
        tooltip: 'Get HTML',
        child: Icon(Icons.content_copy),
      ),
    );
  }
}

4. 运行项目

保存所有文件并运行你的Flutter项目。你现在应该能看到一个带有富文本编辑器的简单界面，你可以在其中编辑文本并查看HTML格式的输出。

注意事项

  • 确保你使用的rich_editor_gg版本与Flutter SDK版本兼容。
  • 你可以根据需求自定义和扩展富文本编辑器的功能，比如添加更多的工具栏按钮、处理图片上传等。
  • 插件的API可能会随着版本更新而有所变化，请参考最新的官方文档和示例代码。

希望这个示例能帮助你在Flutter项目中集成和使用rich_editor_gg富文本编辑器插件！

回到顶部