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

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

简介

Flutter Html Editor - Enhanced 是一个用于 Android、iOS 和 Web 的富文本编辑器。它基于 Summernote 的 JavaScript 封装，可以帮助用户编写所见即所得（WYSIWYG）的 HTML 代码。

特点：

• 支持 Flutter Web，几乎包含所有移动端功能。
• 提供完全原生的 Flutter 控件。
• 使用高度优化的 WebView 来提供最佳体验。
• 不依赖本地服务器加载 HTML 编辑器代码，性能更佳。
• 提供基于控制器的 API，方便调用方法。
• 支持多种 Summernote 方法和回调。
• 可以自定义工具栏样式和行为。

安装与配置

在 pubspec.yaml 中添加依赖：

dependencies:
  html_editor_enhanced_fork: ^2.5.0

Android 配置： 确保在 AndroidManifest.xml 文件中声明网络权限：

<uses-permission android:name="android.permission.INTERNET"/>

iOS 配置： 为了允许用户从存储中选择文件，需要完成以下设置：

cd ios && pod install

对于图片、视频、音频和其他文件类型，可以分别使用 FileType.image、FileType.video、FileType.audio 和 FileType.any。

基本使用

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

import 'package:flutter/material.dart';
import 'package:html_editor_enhanced_fork/html_editor.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HtmlEditorExample(),
    );
  }
}

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

class _HtmlEditorExampleState extends State<HtmlEditorExample> {
  final HtmlEditorController _controller = HtmlEditorController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('富文本编辑器示例'),
      ),
      body: HtmlEditor(
        controller: _controller,
        htmlEditorOptions: HtmlEditorOptions(
          hint: '请输入您的文本...',
          initialText: '<p>初始文本</p>',
        ),
        otherOptions: OtherOptions(height: 400),
      ),
    );
  }
}

示例代码详解

以下是一个完整的示例代码，展示了如何使用 html_editor_enhanced_fork 插件实现富文本编辑器，并支持多种功能：

import 'package:flutter/material.dart';
import 'package:html_editor_enhanced_fork/html_editor.dart';
import 'package:file_picker/file_picker.dart';

void main() => runApp(HtmlEditorExampleApp());

class HtmlEditorExampleApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '富文本编辑器示例',
      home: HtmlEditorExample(title: '富文本编辑器'),
    );
  }
}

class HtmlEditorExample extends StatefulWidget {
  HtmlEditorExample({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _HtmlEditorExampleState createState() => _HtmlEditorExampleState();
}

class _HtmlEditorExampleState extends State<HtmlEditorExample> {
  final HtmlEditorController _controller = HtmlEditorController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (!kIsWeb) {
          _controller.clearFocus();
        }
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          actions: [
            IconButton(
              icon: Icon(Icons.refresh),
              onPressed: () {
                if (kIsWeb) {
                  _controller.reloadWeb();
                } else {
                  _controller.editorController!.reload();
                }
              },
            ),
          ],
        ),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              HtmlEditor(
                controller: _controller,
                htmlEditorOptions: HtmlEditorOptions(
                  hint: '请输入您的文本...',
                  shouldEnsureVisible: true,
                  processInputHtml: false, // 关闭自动处理输入 HTML
                ),
                htmlToolbarOptions: HtmlToolbarOptions(
                  toolbarPosition: ToolbarPosition.aboveEditor,
                  toolbarType: ToolbarType.nativeScrollable,
                  onButtonPressed: (ButtonType type, bool? status, Function? updateStatus) {
                    print("按钮 '${describeEnum(type)}' 被按下，当前状态为 $status");
                    return true;
                  },
                  onDropdownChanged: (DropdownType type, dynamic changed, Function(dynamic)? updateSelectedItem) {
                    print("下拉框 '${describeEnum(type)}' 改变为 $changed");
                    return true;
                  },
                  mediaLinkInsertInterceptor: (String url, InsertFileType type) {
                    print('插入链接: $url');
                    return true;
                  },
                  mediaUploadInterceptor: (PlatformFile file, InsertFileType type) async {
                    print('上传文件: ${file.name}, 大小: ${file.size}, 类型: ${file.extension}');
                    return true;
                  },
                ),
                otherOptions: OtherOptions(height: 550),
                callbacks: Callbacks(
                  onBeforeCommand: (String? currentHtml) {
                    print('命令执行前 HTML: $currentHtml');
                  },
                  onChangeContent: (String? changed) {
                    print('内容更改至: $changed');
                  },
                  onInit: () {
                    print('初始化完成');
                  },
                ),
                plugins: [
                  SummernoteAtMention(
                    getSuggestionsMobile: (String value) {
                      return ['测试1', '测试2', '测试3']
                          .where((element) => element.contains(value))
                          .toList();
                    },
                    mentionsWeb: ['测试1', '测试2', '测试3'],
                    onSelect: (String value) {
                      print('选择提及: $value');
                    },
                  ),
                ],
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    ElevatedButton(
                      onPressed: () {
                        _controller.undo();
                      },
                      child: Text('撤销'),
                    ),
                    SizedBox(width: 16),
                    ElevatedButton(
                      onPressed: () {
                        _controller.clear();
                      },
                      child: Text('重置'),
                    ),
                    SizedBox(width: 16),
                    ElevatedButton(
                      onPressed: () async {
                        String text = await _controller.getText();
                        print('当前 HTML: $text');
                      },
                      child: Text('获取 HTML'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}