creta_rich_text_editor 1.1.7

A feature-rich and highly customizable rich text editor for Flutter, supporting real-time preview, JSON import/export, and dynamic styling.

Creta Rich Text Editor

A feature-rich and highly customizable rich text editor for Flutter that supports real-time preview, JSON import/export, and a wide range of text styling options.

Features

• 100% Flutter code! : It's native flutter, not using java script.
• Real-time WYSIWYG-like Preview: See your changes instantly in a live preview pane while editing.
• Dynamic Toolbar: Responsive toolbar that adapts its layout to the available width.
• Extensive Styling:
  • Font family and size
  • Bold, italic, underline
  • Text color and alignment
  • Letter and line spacing
  • Shadow and outline effects
• JSON Import/Export: Easily serialize editor content to and from JSON for easy storage and retrieval.
• Customizable UI:
  • Set initial dimensions (width, height).
  • Customize background colors and padding.
  • Show or hide the title bar.
  • Provide a custom list of fonts.

Getting Started

Add this to your package's pubspec.yaml file:

dependencies:
  creta_rich_text_editor: ^1.1.3

Then, import the library in your Dart code:

import 'package:creta_rich_text_editor/creta_rich_text_editor.dart';

Usage

Here's a basic example of how to use the RichTextEditor:

//import 'dart:convert';
import 'package:flutter/material.dart';
import 'src/controllers/rich_text_editor_controller.dart';
import 'src/widgets/rich_text_editor.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rich Text Editor Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Rich Text Editor Demo'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late RichTextEditorController _controller;

  @override
  void initState() {
    super.initState();
    _controller = RichTextEditorController();

    Future.microtask(() {
      const sampleJsonString = '''
      {
          "document": {
              "spans": [
                  {
                      "text": "Hello, Rich Text Editor! 12345 678901234\\n",
                      "attribute": {
                          "fontSize": 24,
                          "color": 4278190080
                      }
                  },
                  {
                      "text": "Hello, Rich TextEditor!1\\n",
                      "attribute": {
                          "fontSize": 24,
                          "color": 4278190080
                      }
                  },
                  {
                      "text": "Hello, Rich TextEditor!2\\n",
                      "attribute": {
                          "fontSize": 24,
                          "color": 4278190080
                      }
                  },
                  {
                      "text": "Hello, Rich TextEditor!3\\n",
                      "attribute": {
                          "fontSize": 24,
                          "color": 4278190080
                      }
                  },
                  {
                      "text": "Hello, Rich TextEditor!4\\n",
                      "attribute": {
                          "fontSize": 24,
                          "color": 4278190080
                      }
                  },
                  {
                      "text": "Hello, Rich TextEditor!5\\n",
                      "attribute": {
                          "fontSize": 24,
                          "color": 4278190080
                      }
                  },
                  {
                      "text": "Hello, Rich TextEditor!6\\n",
                      "attribute": {
                          "fontSize": 24,
                          "color": 4278190080
                      }
                  },
                  {
                      "text": "Hello, Rich TextEditor!7\\n",
                      "attribute": {
                          "fontSize": 24,
                          "color": 4278190080
                      }
                  },
                  {
                      "text": "Hello, Rich TextEditor!8\\n",
                      "attribute": {
                          "fontSize": 24,
                          "color": 4278190080
                      }
                  }
              ],
              "textAlign": "center"
          },
          "padding": {
              "left": 16,
              "top": 16,
              "right": 16,
              "bottom": 16
          }
      }
      ''';
      _controller.setDocumentFromJsonString(sampleJsonString);
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: RichTextEditor(
          initialMode: EditorMode.edit,
          fontList: const ['Roboto', 'Arial', 'Courier', 'Long name font...'],
          showTitleBar: false,
          width: 900,
          height: 200,
          controller: _controller,
          onEditCompleted: (json) {
            //print('-----------------------------------------------------------');
            // ignore: avoid_print
            print('onEditCompleted: $json');
          },
        ),
      ),
      // floatingActionButton: FloatingActionButton(
      //   onPressed: () {
      //     // 컨트롤러에서 문서의 JSON 표현을 가져옵니다.
      //     final jsonMap = _controller.document.toJson();
      //     // jsonEncode를 사용하여 Dart 맵을 사람이 읽기 좋은 형식의 JSON 문자열로 변환합니다.
      //     final jsonString = jsonEncode(jsonMap, toEncodable: (e) => e.toString());
      //     // ignore: avoid_print
      //     print(jsonString);
      //   },
      //   tooltip: 'Print JSON',
      //   child: const Icon(Icons.data_object),
      // ),
    );
  }
}

Additional Information

• The project is open-source and contributions are welcome.
• Please file issues and feature requests on the GitHub repository.