Flutter Summernote

Flutter 中的文本编辑器，适用于 Android 和 iOS，基于 Summernote 0.8.18 JavaScript 包装器，帮助自由编写 WYSIWYG HTML 代码。

home

attach

设置

将 flutter_summernote: ^latest 添加为 pubspec.yaml 中的依赖项

iOS

将以下键添加到您的 Info.plist 文件中，该文件位于 <project root>/ios/Info.plist

    <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>

用法

  1. 导入 flutter html 编辑器
    import 'package:flutter_summernote/flutter_summernote.dart';
  1. 从 HTML 编辑器状态创建全局键
    GlobalKey<FlutterSummernoteState> _keyEditor = GlobalKey();
  1. 将 HTML 编辑器添加到小部件
    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. 从 HTML 编辑器获取文本
    final _etEditor = await keyEditor.currentState.getText();

可用的选项参数

参数 类型 默认值 描述
key GlobalKey<HtmlEditorState> 必需 用于获取方法和重置
value 字符串 空 初始化文本编辑器的文本内容
高度 双精度 380 文本编辑器的高度
装饰 BoxDecoration 空 编辑器装饰
imageWidth 字符串 100% 图片选择器的宽度
提示 字符串 空 占位符提示文本
customToolbar 字符串 空 添加所有可用的 工具栏。请勿使用插入（视频和图片），请使用 hasAttachment 选项。
hasAttachment Boolean（布尔值） 假 如果您想显示或隐藏附件按钮，请使用此选项
showBottomToolbar Boolean（布尔值） 假 如果您想显示或隐藏底部工具栏，请使用此选项

GitHub

https://github.com/chandrabezzo/flutter_summernote