Flutter web：带有编辑器的文本字段

Question

我用这样的编辑器搜索了 5 个小时后的文本字段：：

如此多行并带有编辑器。

编辑：

我的临时解决方案：

final _commentMarkdownTextContributorCreateMissionView = Padding(
      padding: EdgeInsets.only(top: 24.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("Tout comprendre sur le "),
          InkWell(
            child: Text(
              "Markdown",
              style: TextStyle(color: IneatColors.pink),
            ),
            onTap: () async {
              if (await canLaunch("https://fr.wikipedia.org/wiki/Markdown")) {
                await launch("https://fr.wikipedia.org/wiki/Markdown");
              }
            },
          ),
        ],
      ),
    );

final _contextMissionMarkdownTextInputContributorCreateMissionView =
        Padding(
      padding: EdgeInsets.only(top: 24.0, bottom: 12.0),
      child: MarkdownTextInput(
        (String value) => model.setOnTextChangedContext(value),
        model.contextMarkdownTextInput,
        label: 'Contexte',
      ),
    );

    final _contextMissionMarkdownBodyContributorCreateMissionView = Padding(
      padding: EdgeInsets.only(top: 24.0, left: 12.0),
      child: MarkdownBody(
        data: model.contextMarkdownTextInput,
      ),
    );

flutter_markdown： # #Markdown : https://pub:dev/packages/flutter_markdown:

markdown_editable_textinput： # 文字输入：https://pub:dev/packages/markdown_editable_textinput#-example-tab-:

文本字段中的 Markdown 语言有效，但目前还不是工具，所以如果您有解决方案。

你能治愈我吗？兼容flutter web

Answer 1

我希望这个插件能帮到你。 我在这里复制了插件的示例代码。 [flutter_markdown][1]

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

const String _markdownData = """
# Markdown Example
Markdown allows you to easily include formatted text, images, and even formatted Dart code in your app.

## Titles

Setext-style

这是一个 H1

这是一个 H2

Atx-style

这是一个 H1

这是一个 H2

这是H6

Select the valid headers:

- [x] `# hello`
- [ ] `#hello`

## Links

[Google's Homepage][Google]

inline-style

[参考风格][谷歌]

## Images

![Flutter logo](/dart-lang/site-shared/master/src/_assets/image/flutter/icon/64.png)

## Tables

|Syntax                                 |Result                               |
|---------------------------------------|-------------------------------------|
|`*italic 1*`                           |*italic 1*                           |
|`_italic 2_`                           | _italic 2_                          |
|`**bold 1**`                           |**bold 1**                           |
|`__bold 2__`                           |__bold 2__                           |
|`This is a ~~strikethrough~~`          |This is a ~~strikethrough~~          |
|`***italic bold 1***`                  |***italic bold 1***                  |
|`___italic bold 2___`                  |___italic bold 2___                  |
|`***~~italic bold strikethrough 1~~***`|***~~italic bold strikethrough 1~~***|
|`~~***italic bold strikethrough 2***~~`|~~***italic bold strikethrough 2***~~|

## Styling
Style text as _italic_, __bold__, ~~strikethrough~~, or `inline code`.

- Use bulleted lists
- To better clarify
- Your points

## Code blocks
Formatted Dart code looks really pretty too:

无效的主要（）{ 运行应用程序（材料应用程序（ 家：脚手架（ 正文：Markdown（数据：markdownData）， ), )); }

## Markdown widget

This is an example of how to create your own Markdown widget:

    Markdown(data: 'Hello _world_!');

Enjoy!

[Google]: https://www.google.com/
""";

void main() {
  final controller = ScrollController();

  runApp(
    MaterialApp(
      title: "Markdown Demo",
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Markdown Demo'),
        ),
        body: SafeArea(
          child: Markdown(
            controller: controller,
            selectable: true,
            data: _markdownData,
            imageDirectory: 'https://raw.githubusercontent.com',
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.arrow_upward),
          onPressed: () => controller.animateTo(0,
              duration: Duration(seconds: 1), curve: Curves.easeOut),
        ),
      ),
    ),
  );
}


  [1]: https://pub.dev/packages/flutter_markdown