Flutter富文本编辑插件flutter_summernote的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter富文本编辑插件flutter_summernote的使用

Flutter Summernote

Text Editor in Flutter for Android and iOS to help free write WYSIWYG HTML code based on Summernote 0.8.18 javascript wrapper.

demo example demo example

NOTICE

This package dependent to the Official WebView Plugin. In this package can’t add image, video, or another file using editor toolbar. To handle attach image this package give you another solution using image Image Picker at bottom of editor. This package can’t use enableinteractiveSelection from TextField, to handle that this package give you another solution using copy paste at bottom of editor. Thank you for all your support.

Setup

添加依赖

add flutter_summernote: ^latest as dependency to pubspec.yaml

iOS设置

Add the following keys to your Info.plist file,

<key>io.flutter.embedded_views_preview</key>
<true/>

<key>NSCameraUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>
<key>NSMicrophoneUsageDescription</key>
<string>Used to capture audio for image picker plugin</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
     <true/>
</dict>

Usage

  1. import flutter html editor
import 'package:flutter_summernote/flutter_summernote.dart';
  1. Create Global key from HTML Editor State
GlobalKey<FlutterSummernoteState> _keyEditor = GlobalKey();
  1. Add HTML Editor to widget
FlutterSummernote(
    hint: "Your text here...",
    key: _keyEditor
),
FlutterSummernote(
    hint: "Your text here...",
    key: _keyEditor,
    customToolbar: """
        [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']]
        ]"""
)
  1. Get text from Html Editor
final _etEditor = await keyEditor.currentState.getText();

Avalaible option parameters

Parameter Type Default Description
key GlobalKey required for get method & reset
value String empty initiate text content for text editor
height double 380 height of text editor
decoration BoxDecoration empty Decoration editor
widthImage String 100% width of image picker
hint String empty Placeholder hint text
customToolbar String empty Add all available Toolbar. Don’t use insert (video & picture), please use hasAttachment option.
customPopover String empty Add all available Popover (the same paragraph as for toolbar, but below)
hasAttachment Boolean false Use this option if you want to show or hide attachment button
showBottomToolbar Boolean false Use this option if you want to show or hide bottom toolbar
returnContent Function null Use this callback to return text content on await keyEditor.currentState.getText() function call.

License

This project is licensed under the MIT License - see the LICENSE file for details.

示例代码

以下是完整的示例代码，您可以直接复制并在您的项目中运行。

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Demo Flutter Summernote'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<FlutterSummernoteState> _keyEditor = GlobalKey();
  String result = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        elevation: 0,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.save),
            onPressed: () async {
              final value = (await _keyEditor.currentState?.getText());
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                duration: Duration(seconds: 5),
                content: Text(value ?? '-'),
              ));
            },
          )
        ],
      ),
      backgroundColor: Colors.white,
      body: FlutterSummernote(
        hint: 'Your text here...',
        key: _keyEditor,
        hasAttachment: true,
        customToolbar: """
          [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['insert', ['link', 'table', 'hr']]
          ]
        """,
      ),
    );
  }
}

这个示例展示了如何在Flutter应用中使用flutter_summernote插件创建一个富文本编辑器。通过这个例子，您可以了解如何配置编辑器、获取编辑器中的文本内容以及自定义工具栏等功能。希望这个示例对您有所帮助！


更多关于Flutter富文本编辑插件flutter_summernote的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter富文本编辑插件flutter_summernote的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用flutter_summernote插件的示例代码。需要注意的是，截至我最后更新的时间（2023年），flutter_summernote这个具体的插件名称在Flutter社区中可能并不常见，因此我会以一个假设的富文本编辑器插件为例来展示实现方式。通常，Flutter社区中有几个流行的富文本编辑器插件，比如flutter_quill或cached_network_image结合自定义富文本组件。但在这里，为了符合你的要求，我将假设flutter_summernote是一个可用的富文本编辑器插件。

首先，确保你的pubspec.yaml文件中已经添加了flutter_summernote依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_summernote: ^x.y.z  # 替换为实际版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter应用中实现富文本编辑功能。以下是一个简单的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_summernote/flutter_summernote.dart';  // 假设的包导入

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Summernote Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _content = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Summernote Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Expanded(
              child: SummernoteEditor(
                controller: TextEditingController(text: _content),
                onChanged: (text) {
                  setState(() {
                    _content = text;
                  });
                },
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // 这里可以处理保存或提交内容的逻辑
                print("Content: $_content");
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个使用SummernoteEditor（假设的组件名）的富文本编辑器。我们通过TextEditingController来管理编辑器的文本内容，并在内容变化时更新状态。

请注意，由于flutter_summernote可能不是一个真实存在的插件，上述代码是基于假设的。如果你实际上在寻找一个Flutter富文本编辑器插件，你可能需要查看如flutter_quill这样的流行插件。flutter_quill的使用方式与上述代码类似，但会有不同的API和配置。

对于flutter_quill，你可以参考以下代码作为替代方案：

dependencies:
  flutter_quill: ^x.y.z  # 替换为实际版本号

然后在你的代码中：

import 'package:flutter_quill/flutter_quill.dart';
import 'package:flutter_quill/models/documents/document.dart';

// ... 省略其他代码，类似上面的结构 ...

// 使用QuillEditor代替SummernoteEditor
QuillEditor(
  controller: _quillController,  // 使用QuillController代替TextEditingController
  focusNode: _focusNode,
  readOnly: false,
  padding: EdgeInsets.zero,
  customStyles: DefaultTextStyles(),
  scrollController: _scrollController,
  expands: true,
)

在实际应用中，你需要根据所选插件的文档来调整代码。

回到顶部