Flutter Markdown编辑器插件markdown_quill的使用
Flutter Markdown编辑器插件markdown_quill的使用
Markdown Quill
🤠 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
更多关于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();
}
}
在这个示例中:
- 我们创建了一个Flutter应用,并在
MarkdownEditorScreen
中实现了Markdown编辑器。 - 使用
MarkdownQuillController
来管理Markdown文档的状态。 MarkdownQuill
组件用于显示和编辑Markdown内容。- 一个按钮用于获取当前编辑器中的Markdown文本,并通过SnackBar显示。
你可以根据需要进一步自定义和扩展这个示例,比如添加更多的Markdown样式、处理图像上传、或者将Markdown内容保存到服务器等。