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

Minimal HTML WYSIWYG编辑器仅支持上下文菜单格式化选项（目前）。

这主要是为了解决其他基于HTML的WYSIWYG编辑器的一些问题：

• 使用Summernote作为底层库且过于臃肿。
• 在屏幕阅读器上的表现不佳。
• 不提供精细的UI定制。
• 缺少常见的文本字段回调和方法。

特性

支持精细的UI定制

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

常见文本字段回调

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

控制器方法

• 设置HTML
• 获取HTML
• 获取焦点
• 失去焦点

轻量级

仅包含基本的HTML、CSS和JS，无任何依赖库或jQuery。

暴露控制器

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

如何使用

最小示例

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

HtmlEditor(),

简单示例

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

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

完整功能示例

具有自定义外观、灵活高度、避免编辑时文本在键盘下消失的自动滚动、屏幕阅读器的自定义WebView标题和回调动作：

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,
    ),
    ...,
  ],
),

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_minimal_html_editor/flutter_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),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}