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

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

RichEditor for Flutter 是一个为 Flutter 开发的富文本 WYSIWYG 编辑器，支持 Android 和 iOS。

功能

• 粗体
• 斜体
• 下标
• 上标
• 删除线
• 下划线
• 左对齐
• 居中对齐
• 右对齐
• 引用
• 标题1
• 标题2
• 标题3
• 标题4
• 标题5
• 标题6
• 撤销
• 重做
• 缩进
• 取消缩进
• 插入图片
• 插入YouTube视频
• 插入视频
• 插入音频
• 插入链接
• 无序列表（项目符号）
• 有序列表（数字）

编辑器属性变化

• 文字颜色
• 占位符
• 状态回调

里程碑

• 复选框
• 文字背景色
• 文字字体大小
• 字体族

示例演示

开始使用

在 pubspec.yaml 文件中添加依赖：

  rich_text_html_editor: ^1.0.2

使用示例

在 /example 文件夹中查看示例代码。

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

示例代码

import 'package:flutter/material.dart';

import 'package:rich_text_html_editor/rich_editor.dart';

import 'rich_editor_toolbar.dart';

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

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

  // 这个小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Flutter Demo Rich Editor'),
      );
}

// 创建带有标题属性的MyHomePage无状态小部件类
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // 最终的标题属性
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final GlobalKey<RichEditorState> _richEditorKey;
  late final GlobalKey<RichEditorToolbarState> _richToolbarEditorKey;

  [@override](/user/override)
  void initState() {
    super.initState();
    _richEditorKey = GlobalKey<RichEditorState>();
    _richToolbarEditorKey = GlobalKey<RichEditorToolbarState>();
  }

  // 构建方法
  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            children: [
              RichEditorToolbar(
                key: _richToolbarEditorKey,
                onTap: (EditorStyleType style) {
                  // 忽略：缺少枚举常量的switch
                  switch (style) {
                    case EditorStyleType.BOLD:
                      _richEditorKey.currentState?.setBold();
                      break;
                    case EditorStyleType.ITALIC:
                      _richEditorKey.currentState?.setItalic();
                      break;
                    case EditorStyleType.STRIKETHROUGH:
                      _richEditorKey.currentState?.setStrikeThrough();
                      break;
                    case EditorStyleType.UNDERLINE:
                      _richEditorKey.currentState?.setUnderline();
                      break;
                    case EditorStyleType.UNORDERED_LIST:
                      _richEditorKey.currentState?.setBullets();
                      break;
                  }
                },
              ),
              Container(
                padding: EdgeInsets.all(10),
                margin: EdgeInsets.all(10),
                decoration: const BoxDecoration(
                  color: Color.fromRGBO(246, 246, 246, 1),
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                ),
                child: SizedBox(
                  height: 100,
                  child: RichEditor(
                    key: _richEditorKey,
                    placeholder: 'Sample placeholder',
                    onStyleTextFocused: (editorStyles) {
                      _richToolbarEditorKey.currentState
                          ?.updateStyle(editorStyles);
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      );
}