FlutterFlow,Html 富文本编辑器

问题描述 投票:0回答:0

我想在我的 FlutterFlow 项目中添加一个富文本编辑器,用户可以在其中写一篇文章并保存它,它应该保存到我的 firebase 中。我在 youtube 上看到了一个很好的视频:这个我按照他的步骤复制了他的代码:

<blink>
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

// Set your widget name, define your parameter, and then add the
// boilerplate code using the button on the right!
// replace - [{"Collection name": "htmleditor"}, {"Field name": "htmltext"}, {"App State name": "textFromHtmlEditor"}]

import '../../flutter_flow/flutter_flow_widgets.dart';

//import 'package:html_editor_enhanced/html_editor.dart';

class MyHtmlEditor extends StatefulWidget {
  const MyHtmlEditor({
    Key? key,
    this.width,
    this.height,
    this.currentHtml,
  }) : super(key: key);

  final double? width;
  final double? height;
  final String? currentHtml;

  @override
  _MyHtmlEditorState createState() => _MyHtmlEditorState();
}

class _MyHtmlEditorState extends State<MyHtmlEditor> {
  HtmlEditorController controller = HtmlEditorController();

  // Get a reference to the Firestore database
  final firestore = FirebaseFirestore.instance;

  // Get a reference to the collection
  late final CollectionReference<Object?> collectionRef;

  @override
  void initState() {
    super.initState();
    // Initialize the collection reference
    collectionRef = firestore.collection('news');
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: [
        HtmlEditor(
          controller: controller, //required
          htmlEditorOptions: HtmlEditorOptions(
            hint: "Type your Text here",
            initialText: widget.currentHtml,
          ),
          htmlToolbarOptions: HtmlToolbarOptions(
            toolbarType: ToolbarType.nativeGrid,
          ),
          otherOptions: OtherOptions(
            height: 400,
          ),
        ),
        FFButtonWidget(
          onPressed: () async {
            String data = await controller.getText();
            // save to Firebase
            final doc = createHtmleditorRecordData(full_article: data);

            collectionRef.limit(1).get().then((snapshot) {
              if (snapshot.docs.isNotEmpty) {
                // update document
                final docRef = snapshot.docs[0].reference;
                docRef.update(doc);
              } else {
                // create document
                collectionRef.add(doc);
              }
              });

              // Update local state
              FFAppState().update(() {
                setState(() => FFAppState().textFromHtmlEditor = data);
              });
            
          },
         child: Text("SAVE TEXT *"))
          
      ],
    ));
  }
}
</blink>

我期待代码没有错误,因为我认为我正确地遵循了这些步骤,但是当我编译它时它有错误:

enter image description here

我不明白,因为第 16 行是空的!

另一个错误:

enter image description here

enter image description here

enter image description here

enter image description here

感谢任何帮助:)

rich-text-editor custom-widgets flutterflow
© www.soinside.com 2019 - 2024. All rights reserved.