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

简介

flutter_rte 是一个易于使用的所见即所得（WYSIWYG）HTML编辑器，适用于Flutter，并内置了语音转文字功能。该插件基于 html_editor_enhanced 进行改进，提供了更好的高度约束、更灵活的HTML生成以及XSS防护等功能。

尝试在线演示

你可以在这里尝试在线演示：Flutter Rich Text Editor Web

核心特性

• 改进的高度约束：
  • 自适应内容高度
  • 扩展至全高
  • 显式设置高度
• 使用 Squire 替代 Summernote 和 jQuery，提供更灵活的HTML5富文本编辑。
• 使用 DOMPurify 提供超快的XSS防护。
• 使用Flutter官方的 webview_flutter 替代 in_app_webview。
• 内置语音转文字功能（主要适用于Web平台），由 speech_to_text 包提供支持。

基本实现

基本实现不需要控制器，只需在 HtmlEditor 中设置一些简单的属性即可。

示例代码

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  String result = 'Hello world!';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter RTE Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: HtmlEditor(
          initialValue: result,
          onChanged: (s) => setState(() => result = s ?? ''),
          hint: 'Enter your text here...',
        ),
      ),
    );
  }
}

高级实现

高级实现需要创建并配置 HtmlEditorController 实例，以访问更多的API选项，如样式选项、工具栏选项和编辑器选项等。

示例代码

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final HtmlEditorController controller = HtmlEditorController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter RTE Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            HtmlEditor(
              controller: controller,
              minHeight: 250,
              onChanged: (s) => print(s),
              initialValue: '<p>Hello, World!</p>',
            ),
            ElevatedButton(
              onPressed: () async {
                await controller.setText('<p>New content</p>');
              },
              child: Text('Set Content'),
            ),
            ElevatedButton(
              onPressed: () async {
                final content = await controller.getText();
                print(content);
              },
              child: Text('Get Content'),
            ),
          ],
        ),
      ),
    );
  }
}

HTML样式选项

通过 HtmlStylingOptions 参数可以定义生成HTML的样式。你可以选择段落标签和其他HTML标签的样式。

示例代码

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final HtmlEditorController controller = HtmlEditorController();

  [@override](/user/override)
  void initState() {
    super.initState();
    var stylingOptions = HtmlStylingOptions(
      globalStyleSheet: '/* Your CSS string contents of style.css file */',
      blockTag: 'p',
      blockTagAttributes: HtmlTagAttributes(
        inlineStyle: 'text-indent:3.5em; text-align:justify;',
        cssClass: 'my-custom-pgf',
      ),
      li: HtmlTagAttributes(
        inlineStyle: 'margin: .5em 1em  .5em .5em',
        cssClass: 'my-custom-li-class',
      ),
      sanitizeOnPaste: true,
    );

    controller.setStylingOptions(stylingOptions);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter RTE Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: HtmlEditor(
          controller: controller,
          minHeight: 250,
          onChanged: (s) => print(s),
          initialValue: '<p>Hello, World!</p>',
        ),
      ),
    );
  }
}

工具栏位置与内容

你可以自定义工具栏的位置和内容，包括将工具栏放置在编辑器上方或下方，甚至将其分离出来放在其他地方。

示例代码

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final HtmlEditorController controller = HtmlEditorController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter RTE Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: HtmlEditor(
          controller: controller,
          toolbarPosition: ToolbarPosition.aboveEditor,
          toolbarType: ToolbarType.scrollable,
          minHeight: 250,
          onChanged: (s) => print(s),
          initialValue: '<p>Hello, World!</p>',
        ),
      ),
    );
  }
}

语音转文字功能

默认情况下，语音转文字功能是启用的。如果你想禁用它，可以将 enableDictation 属性设置为 false。

示例代码

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter RTE Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: HtmlEditor(
          enableDictation: false,
          minHeight: 250,
          onChanged: (s) => print(s),
          initialValue: '<p>Hello, World!</p>',
        ),
      ),
    );
  }
}

特别注意事项

• 由于框架问题，Web平台上仅兼容Flutter 3.3及以上版本。
• 在Android和iOS平台上，需要添加相应的权限以支持语音识别功能。
• 在Web平台上，为了使工具栏能够水平滚动，需要覆盖默认的滚动行为。

Android权限

在 android/app/src/main/AndroidManifest.xml 文件中添加以下权限：

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

iOS权限

在 Info.plist 文件中添加以下权限：

<key>NSSpeechRecognitionUsageDescription</key>
<string>recognize speech</string>
<key>NSMicrophoneUsageDescription</key>
<string>Need microphone access for uploading videos</string>

Web平台滚动行为

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  [@override](/user/override)
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

return MaterialApp(
  scrollBehavior: MyCustomScrollBehavior(),
  // ...
);