Flutter富文本编辑器

FlutterQuill 是一个用于Flutter的富文本编辑器和 Quill 组件。

该库是一个为现代移动平台构建的所见即所得编辑器，目前正在开发Web兼容性。您可以加入我们的 Slack群组进行讨论。

演示应用: https://bulletjournal.us/home/index.html

Pub: https://pub.dev/packages/flutter_quill

用法

请参阅example目录，其中提供了如何使用FlutterQuill的最小化示例。您通常只需要实例化一个控制器

QuillController _controller = QuillController.basic();

然后在您的应用中嵌入工具栏和编辑器。例如

Column(
  children: [
    QuillToolbar.basic(controller: _controller),
    Expanded(
      child: Container(
        child: QuillEditor.basic(
          controller: _controller,
          readOnly: false, // true for view only mode
        ),
      ),
    )
  ],
)

有关高级用法，请查看示例页面。

输入 / 输出

该库使用 Quill 作为内部数据格式。

使用 _controller.document.toDelta() 提取deltas。
使用 _controller.document.toPlainText() 提取纯文本。

FlutterQuill提供了一些JSON序列化支持，以便您可以保存和打开文档。要将文档保存为JSON，请执行以下操作：

var json = jsonEncode(_controller.document.toDelta().toJson());

然后您可以将其写入存储。

要打开一个带有您之前存储的现有JSON表示的FlutterQuill编辑器，您可以执行以下操作：

var myJSON = jsonDecode(incomingJSONText);
_controller = QuillController(
          document: Document.fromJson(myJSON),
          selection: TextSelection.collapsed(offset: 0));

配置

QuillToolbar 类允许您自定义可用的格式选项。
有关高级用法和配置的示例代码，请参阅示例页面。

Web

对于Web开发，请为Flutter使用 flutter config --enable-web，并为React使用 ReactQuill。

必须提供 EmbedBuilder，例如 defaultEmbedBuilderWeb。
另外，必须提供 webImagePickImpl，例如示例页面。

桌面

对于工具栏图像按钮，必须提供 filePickImpl，例如示例页面。

移动端自定义图片尺寸

如下定义 mobileWidth、mobileHeight、mobileMargin、mobileAlignment

{
      "insert": {
         "image": "https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png"
      },
      "attributes":{
         "style":"mobileWidth: 50; mobileHeight: 50; mobileMargin: 10; mobileAlignment: topLeft"
      }
}