Flutter文本编辑插件zefyrka

Flutter文本编辑插件zefyrka_new的使用

软而温和的富文本编辑器适用于Flutter应用程序。

Zefyrka是Zefyr包的一个分支，具有以下改进：

支持Flutter 2.0
开启null安全
添加了扩展属性：
- 文本颜色
- 背景颜色
- 段落对齐方式
- 段落缩进

有关文档，请参阅：https://github.com/glynskyi/zefyrka。

使用方法

查看example目录以获取如何使用Zefyrka的最小示例。你通常只需要实例化一个控制器：

ZefyrController _controller = ZefyrController();

然后将工具栏和编辑器嵌入到你的应用中。例如：

Column(
  children: [
    ZefyrToolbar.basic(controller: _controller), // 工具栏
    Expanded(
      child: ZefyrEditor(
        controller: _controller, // 编辑器
      ),
    ),
  ],
)

查看Sample Page以获取更高级的用法。

安装方法

Zefyrka的官方版本可以从Dart的Pub软件包存储库中安装。

注意：从Pub获取的版本跟踪的是Flutter的稳定渠道。

要从Pub安装Zefyrka，请在pubspec.yaml文件中添加zefyrka包作为依赖项：

dependencies:
  zefyrka: [latest_version]

然后运行flutter packages get。

继续阅读快速入门指南，了解更多关于Zefyrka的信息以及如何在项目中使用它。

示例代码

以下是main.dart文件的示例代码：

import 'package:flutter/material.dart';

import 'src/home.dart';

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

class ZefyrApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Zefyr - 富文本编辑器',
      home: HomePage(),
    );
  }
}

`HomePage`示例代码

以下是HomePage的示例代码，展示了如何使用Zefyrka：

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

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final ZefyrController _controller = ZefyrController(NotusDocument());

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Zefyr - 富文本编辑器'),
      ),
      body: Column(
        children: [
          ZefyrToolbar.basic(controller: _controller),
          Expanded(
            child: ZefyrEditor(
              controller: _controller,
            ),
          ),
        ],
      ),
    );
  }
}

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

ionicwang 1楼•1 天前

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

当然，以下是如何在Flutter项目中使用zefyrka_new插件进行文本编辑的示例代码。zefyrka_new是一个用于Flutter的富文本编辑器插件，它基于Quill编辑器。请注意，zefyrka_new可能不是官方或广泛认可的插件名称，因此这里的示例将基于类似的富文本编辑器插件（如zefyr或quill_flutter），因为zefyrka_new在现有的Flutter社区中并不常见。如果zefyrka_new是一个特定版本或分支，请根据实际情况调整代码。

首先，确保在pubspec.yaml文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  quill_flutter: ^3.0.5  # 假设使用quill_flutter作为替代，根据实际情况调整版本

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

接下来，在您的Flutter应用中创建一个富文本编辑器。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:quill_flutter/quill_flutter.dart';
import 'package:quill_flutter/models/quill_delta.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Rich Text Editor',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Rich Text Editor'),
        ),
        body: RichTextEditorScreen(),
      ),
    );
  }
}

class RichTextEditorScreen extends StatefulWidget {
  @override
  _RichTextEditorScreenState createState() => _RichTextEditorScreenState();
}

class _RichTextEditorScreenState extends State<RichTextEditorScreen> {
  late QuillController _controller;

  @override
  void initState() {
    super.initState();
    _controller = QuillController(
      document: Document.fromJson({
        'ops': [
          {
            'insert': 'Hello, this is a rich text editor!\n',
          },
        ],
      }),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Expanded(
            child: QuillEditor.basic(
              controller: _controller,
              readOnly: false,
              autoFocus: false,
              scrollPhysics: BouncingScrollPhysics(),
              placeholder: 'Compose an epic...',
              styles: QuillStyles(
                theme: QuillTheme.baseTheme,
              ),
            ),
          ),
          SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              // 获取编辑器内容
              final Delta delta = _controller.document.toDelta();
              final List<Map<String, dynamic>> ops = delta.ops;
              // 这里可以处理ops，例如保存到数据库或发送到服务器
              print(ops);
            },
            child: Text('Get Content'),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个富文本编辑器。我们使用quill_flutter插件来实现这个功能。QuillController用于管理编辑器的状态和内容。在initState方法中，我们初始化了一个包含初始文本的QuillController。

编辑器本身是通过QuillEditor.basic小部件创建的，它允许用户输入和编辑富文本。我们还添加了一个按钮来获取编辑器的内容，并将其打印到控制台。

请注意，根据zefyrka_new插件的实际API和功能，代码可能需要相应的调整。如果zefyrka_new是一个特定的分支或更新版本，请参考其官方文档或源代码以获取准确的实现方法。

Flutter文本编辑插件zefyrka_new的使用