FlutterFlow, HTML rich text editor

Question

I am trying to add a rich text editor to my project in FlutterFlow, where user can write an article and save it, it should be saved to my FireBase. I saw a good YouTube video about it: here is the video I followed his steps and I copied his codes, I fixed the errors and updated the codes, the problem is that I should have a save text button to be able to save the text to the firebase, but it is not showing up. Any idea how to fix this problem? Here are the codes:


<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!

//import '/flutter_flow/flutter_flow_util.dart';

// 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:flutter_flow/flutter_flow_widgets.dart';
//import '/flutter_flow/custom_functions.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,
          ),
        ),
        ElevatedButton(
          onPressed: () async {
            String data = await controller.getText();
            // save to Firebase
            final doc = {'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 *'),
          style: ElevatedButton.styleFrom(
            minimumSize: Size(130, 40),
            backgroundColor: FlutterFlowTheme.of(context).primary,
            foregroundColor: FlutterFlowTheme.of(context).primaryBackground,
            textStyle: TextStyle(
              fontFamily: 'Poppins',
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
          ),
        ),
      ],
    ));
  }
}

class FFAppState {
  String textFromHtmlEditor = ''; // Add the textFromHtmlEditor field

  void update(void Function() fn) {
    fn();
  }
} 
</blink>

screenshot

Thanks in advance

FlutterFlow, HTML rich text editor

0 Answers0