如何为Flutter的html_editor_enhanced设置初始编辑内容？

我使用最新版Flutter html_editor_enhanced制作了一个HTML编辑网页，已成功将HTML内容保存至后端MySQL，但不清楚如何将该内容设置为编辑器的初始值。相关代码如下：

class _EditColumnState extends State<EditColumn> {
  final HtmlEditorController controller = HtmlEditorController();

  @override
  void initState() {
    super.initState();
    GetRecordDetail();
  }

  Future<void> GetRecordDetail() async {
    var url = setURL('/cms/news_details', {'id': widget.ID.toString()});  //my own procedure to set URL
    final response = await http.get(url, headers: globals.httpHeaders);
    var raw = convert.jsonDecode(response.body)[0];
    controller.setText(raw['content']);
    controller.reloadWeb();
     setState(() {

     });
  }
}

问题分析 #

你的代码里直接在initState调用GetRecordDetail，但网络请求异步完成时，编辑器组件可能还没完成初始化，此时调用controller.setText()不会生效，reloadWeb也无法正确加载内容。

解决方案 #

方案1：使用initialText参数（推荐）

先获取后端数据，再将数据传给编辑器的initialText参数，让编辑器初始化时直接加载内容：

class _EditColumnState extends State<EditColumn> {
  final HtmlEditorController controller = HtmlEditorController();
  String? _initialContent;

  @override
  void initState() {
    super.initState();
    // 等待页面首帧渲染完成后再请求数据，避免过早调用
    WidgetsBinding.instance.addPostFrameCallback((_) {
      GetRecordDetail();
    });
  }

  Future<void> GetRecordDetail() async {
    var url = setURL('/cms/news_details', {'id': widget.ID.toString()});
    final response = await http.get(url, headers: globals.httpHeaders);
    var raw = convert.jsonDecode(response.body)[0];
    setState(() {
      _initialContent = raw['content'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _initialContent == null 
          ? const Center(child: CircularProgressIndicator()) // 数据加载中显示加载动画
          : HtmlEditor(
              controller: controller,
              initialText: _initialContent!,
              // 其他编辑器配置参数
            ),
    );
  }
}

方案2：监听编辑器onReady回调

利用控制器的onReady回调，确保在编辑器完全初始化完成后再设置内容：

class _EditColumnState extends State<EditColumn> {
  final HtmlEditorController controller = HtmlEditorController();
  String? _targetContent;

  @override
  void initState() {
    super.initState();
    // 编辑器准备就绪时触发
    controller.onReady = () {
      if (_targetContent != null) {
        controller.setText(_targetContent!);
      }
    };
    GetRecordDetail();
  }

  Future<void> GetRecordDetail() async {
    var url = setURL('/cms/news_details', {'id': widget.ID.toString()});
    final response = await http.get(url, headers: globals.httpHeaders);
    var raw = convert.jsonDecode(response.body)[0];
    setState(() {
      _targetContent = raw['content'];
    });
    // 如果此时编辑器已经就绪，直接设置内容
    if (controller.isReady) {
      controller.setText(_targetContent!);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: HtmlEditor(
        controller: controller,
        // 其他编辑器配置参数
      ),
    );
  }
}

这两种方案都能确保编辑器在合适的时机加载初始HTML内容，避免因初始化顺序问题导致的设置失效。

内容的提问来源于stack exchange，提问作者Tony Lam