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

Slim HTML编辑器用于Flutter，具有完整的API控制和可选的基于Flutter的小部件控件。

API文档

请参阅完整的API文档：https://pub.dev/documentation/enough_html_editor/latest/

使用

当前enough_html_editor包包含以下小部件：

• HtmlEditor：HTML编辑器。
• HtmlEditorControls：可选的编辑器控件。
• SliverHeaderHtmlEditorControls：包装器，用于在CustomScrollView中作为粘性头部使用。
• HtmlEditorApi：非小部件 - 用于控制编辑器的API，使用API可以访问编辑后的HTML文本或设置当前文本为粗体，添加无序列表等。
• PackagedHtmlEditor：一个简单的Widget，包含HtmlEditor和HtmlEditorControls。

访问API

你可以选择两种方式之一来访问API：

选项1：使用onCreated(HtmlEditorApi)回调

HtmlEditor(
    onCreated: (api) {
        setState(() {
        _editorApi = api;
        });
    },
    ...
);

之后可以直接访问API，例如：

final text = await _editorApi.getText();

选项2：定义并分配一个GlobalKey<HtmlEditorState>

final _keyEditor = GlobalKey<HtmlEditorState>();
Widget build(BuildContext context) {
    return HtmlEditor(
          key: _keyEditor,
          ...
    );
}

可以通过这个GlobalKey访问HtmlEditorState：

final text = await _keyEditor.currentState.api.getText();

无论是API还是全局键都是创建HtmlEditorControls所必需的。

快速开始

使用PackagedHtmlEditor进行快速启动。这包含默认的控件和编辑器。

import 'package:enough_html_editor/enough_html_editor.dart';
[...]
HtmlEditorApi _editorApi;

[@override](/user/override)
Widget build(BuildContext context) {
    return PackagedHtmlEditor(
          onCreated: (api) {
            _editorApi = api;
          },
          initialContent: '''
          <p>这里是一些文本</p>
          <p>这里是一些<b>加粗</b>文本</p>
          <p>这里是一些<i>斜体</i>文本</p>
          <p>这里是一些<i><b>加粗和斜体</b></i>文本</p>
          <p style="text-align: center;">这里是一些<u><i><b>加粗、斜体和下划线</b></i></u>文本</p>
          <ul><li>一个列表元素</li><li>另一个点</li></ul>
          <blockquote>这里是一个引用<br/>
            横跨几行<br/>
            <blockquote>
                另一个第二级引用
            </blockquote>
        </blockquote>
''',
        );
}

使用你在onCreated回调中接收的HtmlEditorApi查询最终文本：

// 获取仅编辑的文本作为HTML代码：
final text = await _editorApi.getText();
// 获取完整的HTML文档：
final fullHtml = await _editorApi.getFullHtml();

安装

将此依赖项添加到你的pubspec.yaml文件中：

dependencies:
  enough_html_editor: ^0.0.4

enough_html_editor的最新版本是：

特性和错误报告

请在问题跟踪器上提交功能请求和错误。

许可证

此软件受商业友好的Mozilla公共许可证2.0版许可。

以下是完整的示例代码：

import 'package:enough_html_editor/enough_html_editor.dart';
import 'package:enough_platform_widgets/enough_platform_widgets.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

const _htmlContent =
    '''<p>这里是一些文本</p> 带有一个 <a href="https://github.com/Enough-Software/enough_html_editor">链接</a>。
                <p>这里是一些<b>加粗</b>文本</p>
                <p>这里是一些<i>斜体</i>文本</p>
                <p>这里是一些<i><b>加粗和斜体</b></i>文本</p>
                <p style="text-align: center;">这里是一些<u><i><b>加粗、斜体和下划线</b></i></u>文本</p>
                <ul><li>一个列表元素</li><li>另一个点</li></ul>
                <blockquote>这里是一个引用<br/>
                  横跨几行<br/>
                  <blockquote>
                      另一个第二级引用
                  </blockquote>
              </blockquote>
    ''';

/// 示例应用程序，展示如何使用enough_html_editor包
class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) => PlatformSnackApp(
        title: 'enough_html_editor Demo',
        materialTheme: ThemeData(
          primarySwatch: Colors.green,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        cupertinoTheme: const CupertinoThemeData(
          primaryColor: CupertinoColors.activeGreen,
          brightness: Brightness.light,
        ),
        localizationsDelegates: const [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        supportedLocales: const [
          Locale('en'),
        ],
        home: const EditorPage(),
      );
}

/// 示例如何使用简化版的[PackagedHtmlEditor]
/// 它结合了默认控件和编辑器
class EditorPage extends StatefulWidget {
  /// 创建一个新的编辑器页面
  const EditorPage({Key? key}) : super(key: key);

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

class _EditorPageState extends State<EditorPage> {
  HtmlEditorApi? _editorApi;

  [@override](/user/override)
  Widget build(BuildContext context) => PlatformScaffold(
        appBar: PlatformAppBar(
          title: const Text('PackagedHtmlEditor'),
          trailingActions: [
            DensePlatformIconButton(
              icon: const Icon(Icons.send),
              onPressed: () async {
                final text = await _editorApi!.getText();
                print('获取到的文本: [$text]');
                await Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => ResultScreen(htmlText: text),
                  ),
                );
              },
            ),
            DensePlatformIconButton(
              icon: const Icon(Icons.looks_two),
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => const CustomScrollEditorPage(),
                  ),
                );
              },
            ),
          ],
        ),
        body: SingleChildScrollView(
          child: SafeArea(
            child: Column(
              children: [
                PlatformTextButton(
                  onPressed: () => _editorApi?.unfocus(context),
                  child: const Text('取消焦点'),
                ),
                PackagedHtmlEditor(
                  onCreated: (api) {
                    _editorApi = api;
                  },
                  initialContent: _htmlContent,
                ),
              ],
            ),
          ),
        ),
      );
}

/// 示例如何在CustomScrollView中使用编辑器
class CustomScrollEditorPage extends StatefulWidget {
  /// 创建一个自定义滚动视图示例页面
  const CustomScrollEditorPage({Key? key}) : super(key: key);

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

class _CustomScrollEditorPageState extends State<CustomScrollEditorPage> {
  HtmlEditorApi? _editorApi;

  [@override](/user/override)
  Widget build(BuildContext context) => PlatformScaffold(
        body: CustomScrollView(
          physics: const BouncingScrollPhysics(),
          slivers: [
            PlatformSliverAppBar(
              title: const Text('粘性控件'),
              floating: false,
              pinned: true,
              stretch: true,
              actions: [
                DensePlatformIconButton(
                  icon: const Icon(Icons.send),
                  onPressed: () async {
                    final text = await _editorApi!.getText();
                    print('获取到的文本: [$text]');
                    await Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => ResultScreen(htmlText: text),
                      ),
                    );
                  },
                ),
                DensePlatformIconButton(
                  icon: const Icon(Icons.looks_one),
                  onPressed: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const EditorPage(),
                      ),
                    );
                  },
                ),
              ],
            ),
            const SliverToBoxAdapter(
              child: Padding(
                padding: EdgeInsets.all(8.0),
                child: DecoratedPlatformTextField(
                    decoration: InputDecoration(hintText: '主题')),
              ),
            ),
            if (_editorApi != null) ...{
              SliverHeaderHtmlEditorControls(editorApi: _editorApi),
            },
            SliverToBoxAdapter(
              child: HtmlEditor(
                onCreated: (api) {
                  setState(() {
                    _editorApi = api;
                  });
                },
                initialContent: _htmlContent,
              ),
            ),
          ],
        ),
      );
}

/// 显示结果HTML代码
class ResultScreen extends StatelessWidget {
  /// 创建一个新的结果屏幕
  const ResultScreen({Key? key, required this.htmlText}) : super(key: key);

  /// HTML代码
  final String htmlText;

  [@override](/user/override)
  Widget build(BuildContext context) => PlatformScaffold(
        appBar: PlatformAppBar(
          title: const Text('结果'),
        ),
        body: SingleChildScrollView(
          child: SafeArea(child: SelectableText(htmlText)),
        ),
      );
}