カテゴリー・パッケージ・リポジトリを検索

GitHub リポジトリOmkarDabade/markdown_editor_plus

markdown_editor_plus

Flutter用のマークダウンエディタとプレビュー

markdown_editor_plus のプロジェクト画像
スター
24
フォーク
38
最終プッシュ(UTC)
2024/06/19
プロジェクト状態
公開中

元の README

以下は英語原文のスナップショットです。最新版は GitHub をご覧ください。

Markdown Editor Plus

This is a fork of simple_markdown_editor by zahnia88 with contributions from fossfreaks

Simple markdown editor library For flutter. For demo video, you can see it at this url Demo

Features

  • ✅ Convert to Bold, Italic, Strikethrough
  • ✅ Convert to Code, Quote, Links
  • ✅ Convert to Heading (H1, H2, H3).
  • ✅ Convert to unorder list and checkbox list
  • ✅ Support multiline convert
  • ✅ Support auto convert emoji

Usage

Add dependencies to your pubspec.yaml

dependencies:
    markdown_editor_plus: ^latest

Run flutter pub get to install.

How it works

Import library

import 'package:markdown_editor_plus/markdown_editor_plus.dart';

Initialize controller and focus node. These controllers and focus nodes are optional because if you don't create them, the editor will create them themselves

TextEditingController _controller = TextEditingController();

Show widget for editor

// editable text with toolbar by default
MarkdownAutoPreview(
    controller: _controller,
    emojiConvert: true,
)

// editable text without toolbar
MarkdownField(
    controller: _controller,
    emojiConvert: true,
    enableToolBar: false,
)

if you want to parse text into markdown you can use the following widget:

String data = '''
**bold**
*italic*

#hashtag
@mention
'''

MarkdownParse(
    data: data,
    onTapHastag: (String name, String match) {
        // name => hashtag
        // match => #hashtag
    },
    onTapMention: (String name, String match) {
        // name => mention
        // match => #mention
    },
)

In order to set the colors

MarkdownAutoPreview(
    controller: _controller,
    enableToolBar: true,
    emojiConvert: true,
    autoCloseAfterSelectEmoji: false,
    // toolbar's background color, text color will be based on theme
    toolbarBackground: Colors.blue,
    // toolbar's expandable widget colors like headings, ordering
    expandableBackground: Colors.blue[200],
)

Omkar Dabade GitHub avatar
GitHub 作者

Omkar Dabade ↗

Belgaum
言語DartHTMLSwiftKotlinObjective-C

このリポジトリが公開するパッケージ

使用している依存関係

依存関係一覧 7 件

プロジェクトに合うリポジトリを選ぶには?

用途で絞り込み、開発状況を比較し、採用前に元のリポジトリで要件を確認しましょう。

  1. 名前・作者・説明で検索し、技術トピックで絞り込みます。
  2. スター、フォーク、最近のプッシュを比較します。スターは関心の目安であり、品質の保証ではありません。
  3. 利用前に GitHub で README、ライセンス、Issues を確認します。

情報源と管理

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗