Kategorien, Pakete und Repositories suchen

GitHub-RepositoryOmkarDabade/markdown_editor_plus

markdown_editor_plus

Markdown-Editor mit Vorschau für Flutter

Projektcover von markdown_editor_plus
Sterne
24
Forks
38
Letzter Push (UTC)
19.06.2024
Projektstatus
Aktiv

Original-README

Englischer Projektschnappschuss. Aktuelle Inhalte auf 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-Autor

Omkar Dabade ↗

Belgaum
SprachenDartHTMLSwiftKotlinObjective-C

Von diesem Repository veröffentlichte Pakete

Verwendete Abhängigkeiten

Abhängigkeiten 7 Einträge

Wie wähle ich ein passendes Repository?

Nach Anwendungsfall filtern, Aktivität vergleichen und vor der Nutzung das Originalprojekt prüfen.

  1. Nach Name, Autor oder Beschreibung suchen und nach Thema eingrenzen.
  2. Sterne, Forks und letzte Pushes vergleichen. Sterne zeigen Interesse, garantieren aber keine Qualität.
  3. Vor der Nutzung README, Lizenz und Issues auf GitHub prüfen.

Quellen und Pflege

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

GitHub Docs — About repositories ↗