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

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

概述

在Flutter中使用summernote_flutter插件可以帮助您实现一个富文本编辑器，该编辑器基于Summernote 0.8.18的JavaScript包装器。以下是该插件的基本用法及配置步骤。

示例 示例

注意事项

此包依赖于webview_flutter官方WebView插件。因此，在使用该插件时，不能通过编辑器工具栏添加图像、视频或其他文件。 为了处理附件，该包提供了另一种解决方案，即在编辑器底部使用image_picker插件来选择图像。另外，由于该插件不支持TextField中的enableInteractiveSelection功能，因此它在底部提供了复制粘贴的功能。

设置

  1. 在pubspec.yaml文件中添加以下依赖项：
dependencies:
  summernote_flutter: ^latest

iOS配置

在Info.plist文件中添加以下键值对：

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

<key>NSCameraUsageDescription</key>
<string>用于演示图像选择插件</string>
<key>NSMicrophoneUsageDescription</key>
<string>用于捕获音频以供图像选择插件使用</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>用于演示图像选择插件</string>

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

使用

  1. 导入flutter_summernote库：
import 'package:flutter_summernote/flutter_summernote.dart';
  1. 创建一个全局键（GlobalKey）用于HTML编辑器的状态：
GlobalKey<FlutterSummernoteState> _keyEditor = GlobalKey();
  1. 将HTML编辑器添加到你的Widget中：
FlutterSummernote(
  hint: "您的文本内容",
  key: _keyEditor
),
FlutterSummernote(
  hint: "您的文本内容",
  key: _keyEditor,
  customToolbar: """
      [
          ['style', ['bold', 'italic', 'underline', 'clear']],
          ['font', ['strikethrough', 'superscript', 'subscript']]
      ]"""
)
  1. 获取编辑器中的文本内容：
final String _etEditor = await _keyEditor.currentState?.getText();

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

1 回复

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


summernote_flutter 是一个用于 Flutter 的富文本编辑器插件，它基于 Summernote 库，允许用户在应用程序中创建和编辑富文本内容。这个插件非常适合需要在移动应用中嵌入富文本编辑功能的场景。

安装

首先，你需要在 pubspec.yaml 文件中添加 summernote_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  summernote_flutter: ^1.0.0  # 请检查最新版本

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

基本使用

以下是一个简单的示例，展示了如何在 Flutter 应用中使用 summernote_flutter：

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

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

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

class SummernoteEditorDemo extends StatefulWidget {
  @override
  _SummernoteEditorDemoState createState() => _SummernoteEditorDemoState();
}

class _SummernoteEditorDemoState extends State<SummernoteEditorDemo> {
  String _htmlContent = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Summernote Flutter Editor'),
      ),
      body: Column(
        children: [
          Expanded(
            child: SummernoteEditor(
              height: 300,
              hint: 'Enter your text here...',
              onChanged: (value) {
                setState(() {
                  _htmlContent = value;
                });
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('HTML Content: $_htmlContent'),
          ),
        ],
      ),
    );
  }
}

主要参数和功能

  1. height: 编辑器的高度。
  2. hint: 编辑器中的占位符文本。
  3. onChanged: 当编辑器内容发生变化时触发的回调函数。
  4. initialValue: 编辑器的初始内容。
  5. toolbar: 自定义工具栏的配置。

自定义工具栏

你可以通过 toolbar 参数来自定义工具栏的按钮。以下是一个示例：

SummernoteEditor(
  height: 300,
  hint: 'Enter your text here...',
  onChanged: (value) {
    setState(() {
      _htmlContent = value;
    });
  },
  toolbar: [
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    ['insert', ['link', 'picture', 'video']],
    ['view', ['fullscreen', 'codeview', 'help']],
  ],
);

获取和设置内容

你可以通过 onChanged 回调来获取编辑器中的内容，也可以通过 controller 来动态设置内容。

final _controller = SummernoteController();

SummernoteEditor(
  height: 300,
  hint: 'Enter your text here...',
  onChanged: (value) {
    setState(() {
      _htmlContent = value;
    });
  },
  controller: _controller,
);

// 设置内容
_controller.setText('<p>Hello, World!</p>');

// 获取内容
String content = await _controller.getText();
回到顶部