flutter web端如何实现富文本编辑器

在Flutter Web端开发中，如何实现一个功能完善的富文本编辑器？目前尝试了使用flutter_quill插件，但在Web平台上遇到了一些兼容性问题，比如工具栏显示异常和部分功能无法正常使用。有没有其他可靠的方案或经过优化的插件推荐？最好能支持图片上传、文本格式调整等基础功能，同时兼容主流浏览器。

vueper 1楼

使用flutter_quill库，可快速实现富文本编辑器。支持加粗、斜体、图片、视频等，兼容Web端。安装后导入组件，配置工具栏和编辑器即可使用。

更多关于flutter web端如何实现富文本编辑器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

zlyuanteng 2楼

在Flutter Web端实现富文本编辑器，推荐以下几种方案：

1. 使用第三方富文本编辑器包

推荐使用 flutter_quill：

import 'package:flutter_quill/flutter_quill.dart';

class RichTextEditor extends StatelessWidget {
  final QuillController _controller = QuillController.basic();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('富文本编辑器'),
        actions: [
          IconButton(
            icon: Icon(Icons.save),
            onPressed: () {
              // 获取编辑内容
              final content = _controller.document.toPlainText();
              final delta = _controller.document.toDelta();
              print('内容: $content');
            },
          )
        ],
      ),
      body: Column(
        children: [
          QuillToolbar.basic(controller: _controller),
          Expanded(
            child: Container(
              padding: EdgeInsets.all(16),
              child: QuillEditor(
                controller: _controller,
                readOnly: false,
                autoFocus: true,
                expands: false,
                padding: EdgeInsets.zero,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

2. 使用 `flutter_html_editor` 包

import 'package:flutter_html_editor/flutter_html_editor.dart';

class HtmlEditorExample extends StatefulWidget {
  @override
  _HtmlEditorExampleState createState() => _HtmlEditorExampleState();
}

class _HtmlEditorExampleState extends State<HtmlEditorExample> {
  final HtmlEditorController controller = HtmlEditorController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTML编辑器'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              controller.reloadWeb();
            },
          )
        ],
      ),
      body: HtmlEditor(
        controller: controller,
        htmlEditorOptions: HtmlEditorOptions(
          hint: "在这里输入文本...",
        ),
      ),
    );
  }
}

3. 使用 WebView 集成第三方编辑器

import 'package:webview_flutter/webview_flutter.dart';

class WebViewEditor extends StatefulWidget {
  @override
  _WebViewEditorState createState() => _WebViewEditorState();
}

class _WebViewEditorState extends State<WebViewEditor> {
  late WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView编辑器')),
      body: WebView(
        initialUrl: 'about:blank',
        onWebViewCreated: (WebViewController webViewController) {
          controller = webViewController;
          // 加载HTML编辑器
          _loadHtmlEditor();
        },
      ),
    );
  }

  void _loadHtmlEditor() {
    final htmlContent = '''
      <!DOCTYPE html>
      <html>
      <head>
        <script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/5/tinymce.min.js"></script>
      </head>
      <body>
        <textarea id="mytextarea"></textarea>
        <script>
          tinymce.init({
            selector: '#mytextarea',
            plugins: 'advlist autolink lists link image charmap print preview anchor',
            toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
          });
        </script>
      </body>
      </html>
    ''';
    controller.loadUrl(Uri.dataFromString(htmlContent, mimeType: 'text/html').toString());
  }
}

flutter web端如何实现富文本编辑器

1. 使用第三方富文本编辑器包

2. 使用 flutter_html_editor 包

3. 使用 WebView 集成第三方编辑器

推荐方案

2. 使用 `flutter_html_editor` 包