Flutter Markdown编辑器插件markdown_quill的使用

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

Flutter Markdown编辑器插件markdown_quill的使用

Markdown Quill

build workflow codecov pub package

🤠 Contributions are always welcomed ❤️

markdown_quill 提供了将Markdown转换为Quill(Delta)格式及反之的转换器。

使用方法

简单示例

import 'package:markdown/markdown.dart' as md;
import 'package:markdown_quill/markdown_quill.dart';

void main() {
  // 配置 markdown 解析器
  final mdDocument = md.Document(encodeHtml: false);

  final mdToDelta = MarkdownToDelta(markdownDocument: mdDocument);
  final deltaToMd = DeltaToMarkdown();

  const markdown = '''
  # Test
  Hello
  > Testing
  
  This is an `inline code`
  
  and this is 

code block

''';

final delta = mdToDelta.convert(markdown);
print('Delta: $delta');

final markdownAgain = deltaToMd.convert(delta);
print('Converted back to Markdown: $markdownAgain');
}

自定义配置

import 'package:flutter_quill/flutter_quill.dart';
import 'package:markdown/markdown.dart' as md;
import 'package:markdown_quill/markdown_quill.dart';

void main() {
  // 配置 markdown 解析器
  final mdDocument = md.Document(
    encodeHtml: false,
    extensionSet: md.ExtensionSet.gitHubFlavored,
    blockSyntaxes: [const EmbeddableTableSyntax()],
  );

  final mdToDelta = MarkdownToDelta(
    markdownDocument: mdDocument,
    customElementToBlockAttribute: {
      'h4': (element) => [HeaderAttribute(level: 4)],
    },
    customElementToEmbeddable: {
      EmbeddableTable.tableType: EmbeddableTable.fromMdSyntax,
    },
  );

  final deltaToMd = DeltaToMarkdown(
    customEmbedHandlers: {
      EmbeddableTable.tableType: EmbeddableTable.toMdSyntax,
    },
  );

  const markdown = '''
  Hi, this is a test of markdown_quill.
  
  | Syntax      | Description | Test Text     |
  | :---        |    :----:   |          ---: |
  | Header      | Title       | Here's this   |
  | Paragraph   | Text        | And more      |
  
  # H1
  ok
  # H2
  # H3
  done
  # H4
  ''';

  final delta = mdToDelta.convert(markdown);
  print('Delta: $delta');

  final markdownAgain = deltaToMd.convert(delta);
  print('Converted back to Markdown: $markdownAgain');
}

限制

  • 图片:当前转换器不支持图片alt属性,仅保留src。

  • 块属性排他性:flutter_quill块属性有组合限制。例如,以下Markdown会被处理为:

    Foo

    bar baz

    转换后为:
    
    > Foo
    > bar
    > baz
    

TODO

  • 改善DeltaToMarkdown的输出质量

以上是关于Flutter中markdown_quill插件的使用介绍,希望对您有所帮助。如果您有任何问题或需要进一步的帮助,请随时提问!


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

1 回复

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


当然,关于在Flutter中使用markdown_quill插件来实现Markdown编辑器,下面是一个基本的代码示例,展示如何集成和使用这个插件。

首先,确保你的Flutter项目中已经添加了markdown_quill依赖。在pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  markdown_quill: ^x.y.z  # 请替换为最新版本号

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

接下来,你可以在你的Flutter应用中实现一个Markdown编辑器。以下是一个简单的示例:

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

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

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

class MarkdownEditorScreen extends StatefulWidget {
  @override
  _MarkdownEditorScreenState createState() => _MarkdownEditorScreenState();
}

class _MarkdownEditorScreenState extends State<MarkdownEditorScreen> {
  MarkdownQuillController _controller;

  @override
  void initState() {
    super.initState();
    _controller = MarkdownQuillController(
      document: DocumentNode(),  // 初始文档为空
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Markdown Editor'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Expanded(
              child: MarkdownQuill(
                controller: _controller,
                focusNode: FocusNode(),  // 可以根据需要管理焦点
                scrollController: ScrollController(),  // 可选,用于滚动控制
                readOnly: false,  // 设置为true则编辑器变为只读
                placeholder: 'Start typing your Markdown content...',
                styles: MarkdownQuillStyles(
                  // 自定义样式
                  codeBlockTheme: CodeBlockTheme.dark,
                  textStyle: TextStyle(fontSize: 16),
                ),
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // 获取Markdown文本
                final markdownText = _controller.document.toPlainText();
                // 这里可以处理markdownText,比如保存到数据库或显示在其他地方
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Markdown text: $markdownText')),
                );
              },
              child: Text('Get Markdown Text'),
            ),
          ],
        ),
      ),
    );
  }

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

在这个示例中:

  1. 我们创建了一个Flutter应用,并在MarkdownEditorScreen中实现了Markdown编辑器。
  2. 使用MarkdownQuillController来管理Markdown文档的状态。
  3. MarkdownQuill组件用于显示和编辑Markdown内容。
  4. 一个按钮用于获取当前编辑器中的Markdown文本,并通过SnackBar显示。

你可以根据需要进一步自定义和扩展这个示例,比如添加更多的Markdown样式、处理图像上传、或者将Markdown内容保存到服务器等。

回到顶部