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

通用

Minimal HTML WYSIWYG editor 是一个仅包含上下文菜单格式化选项的轻量级HTML富文本编辑器。

这个插件主要作为其他基于HTML的富文本编辑器的替代方案，这些编辑器：

• 使用Summernote作为底层库，非常臃肿。
• 不太适合屏幕阅读器。
• 没有提供细粒度的UI定制。
• 缺少常见的文本字段回调和方法。

特性

支持细粒度的UI定制

• 固定高度或灵活高度
• 自定义占位符和初始文本
• 背景颜色
• 内边距
• Android混合组合
• Webview标题（用于屏幕阅读器）
• 自动调整滚动以适应编辑器高度变化
• 文本缩放

常见的文本字段回调

• 获取焦点
• 失去焦点
• 内容变化

控制器方法

• 设置HTML内容
• 获取HTML内容
• 获取焦点
• 移除焦点

轻量级

仅包含基础的HTML、CSS和JS，没有额外的库或jQuery。

暴露控制器

EditorController.webViewController 可通过 HtmlEditor.controller 访问。

平滑UI

当web视图正在加载时，会显示Flutter的 CircularProgressIndicator，而不再是空容器。

如何使用

最小示例

无需构造函数参数，只需将以下代码插入到你的widget树中：

HtmlEditor(),

简单示例

带有固定高度、自定义占位符和初始内容、灰色背景以及onChange回调来更新内容的编辑器：

HtmlEditor(
  backgroundColorCssCode: "gray",
  minHeight: 300,
  initialText: "Some initial text",
  placeholder: "Edit me",
  onChange: (content, height) => update(content),
),

完整功能示例

带有自定义外观、灵活高度、自动滚动以避免在编辑时文字被键盘遮挡、自定义web视图标题供屏幕阅读器使用以及回调动作的编辑器：

ListView(
  controller: scrollController,
  children: [
    ...,
    HtmlEditor(
      backgroundColorCssCode: "#555555",
      minHeight: 300,
      padding: EdgeInsets.zero,
      flexibleHeight: true,
      autoAdjustScroll: true,
      // 另外，可以为此创建一个变量以访问web控制器和编辑器方法
      controller: EditorController(
        scrollController: scrollController,
      ),
      initialText: "Some initial text",
      placeholder: "Edit me",
      padding: EdgeInsets.all(10),
      scaleFactor: 1.5,
      showLoadingWheel: true,
      onChange: (content, height) => update(content),
      onFocus: () => doSomething(),
      onBlur: () => doSomeOtherThing(),
      printWebViewLog: true,
      webViewTitle: "Editor",
      useAndroidHybridComposition: true,
    ),
    ...,
  ],
),

你可以查看示例代码和API参考以获取更多信息。

示例代码

以下是来自 minimal_html_editor 插件示例代码中的 main.dart 文件：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Minimal Html Editor',
      home: MyHomePage(title: 'Demo'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final _scrollController = ScrollController();
  late EditorController _editorController;

  [@override](/user/override)
  void initState() {
    _editorController = EditorController(scrollController: _scrollController);
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Minimal Html Editor demo"),
          bottom: TabBar(
            tabs: [
              Text("Flexible height, magenta background"),
              Text("Fixed height and scrollable"),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            SingleChildScrollView(
              controller: _scrollController,
              child: Column(
                children: <Widget>[
                  Center(
                    child: Text(
                      "Flexible height, magenta background",
                      style: TextStyle(fontSize: 20),
                    ),
                  ),
                  HtmlEditor(
                    flexibleHeight: true,
                    autoAdjustScroll: true,
                    controller: _editorController,
                    minHeight: 150,
                    padding: EdgeInsets.all(20),
                    backgroundColorCssCode: "magenta",
                    initialText: "Some initial text",
                    placeholder: "Chào thế giới",
                    printWebViewLog: true,
                    useAndroidHybridComposition: true,
                    showLoadingWheel: true,
                    scaleFactor: 2,
                    onChange: (content, height) => print(content),
                  ),
                  Center(
                    child: Text(
                      "Flexible height, magenta background",
                      style: TextStyle(fontSize: 20),
                    ),
                  ),
                ],
              ),
            ),
            SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Center(
                    child: Text(
                      "Fixed height and scrollable",
                      style: TextStyle(fontSize: 20),
                    ),
                  ),
                  HtmlEditor(
                    backgroundColorCssCode: "#fafafa",
                    minHeight: 250,
                    initialText: "Some initial text",
                    placeholder: "Chào thế giới",
                  ),
                  Center(
                    child: Text(
                      "Fixed height and scrollable",
                      style: TextStyle(fontSize: 20),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}