tiny_flutter 0.0.1

TinyMCE rich text editor for Flutter web (HtmlElementView + package assets).

tiny_flutter

A Flutter package that embeds TinyMCE in your app on Flutter web using HtmlElementView. The package ships the editor shell as an asset; your app composes labels, dialogs, and layout around TinyMceEditorWidget.

Features

✅ Web — Rich text editing via TinyMCE inside Flutter web.
✅ Lightweight API — One widget plus getEditorContent / setEditorContent.
✅ No extra runtime deps — Only flutter SDK; TinyMCE loads from CDN in the bundled HTML.

Getting started

Add tiny_flutter to your pubspec.yaml:

dependencies:
  tiny_flutter:
    path: ../tiny_flutter # or pub.dev / git

Import the library:

import 'package:tiny_flutter/tiny_flutter.dart';

Demo

[Tiny Flutter — Flutter web example]

Screenshots (Web)

[Create article dialog]	[Update article dialog]
Create article (empty editor)	Update article (demo HTML in editor)

Example usage

Place TinyMceEditorWidget where you need the editor (often inside a dialog or a Row with your own “Article content” label):

import 'package:flutter/material.dart';
import 'package:tiny_flutter/tiny_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Flexible(
          flex: 1,
          child: Row(
            children: [
              Text('* ', style: TextStyle(color: Colors.red.shade700)),
              const Expanded(
                child: Text(
                  'Article content',
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ),
        const SizedBox(width: 8),
        const Flexible(
          flex: 5,
          child: TinyMceEditorWidget(heightFactor: 0.35),
        ),
      ],
    );
  }
}

Future<void> readAndSave() async {
  final html = await TinyMceEditorWidget.getEditorContent();
  TinyMceEditorWidget.setEditorContent('<p>Hello</p>');
  // use html (e.g. send to API)
}

A full flow (home buttons, white dialogs, create vs update) lives in the example app — run from the example/ folder on web.