搜尋分類、套件與程式碼儲存庫

套件詳情v0.2.15

markdown_editor_plus

一個 TextField 小部件,可讓您輕鬆將 TextField 中的內容轉換為 Markdown,並支援自訂工具列。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
7290
喜歡數
73
Pub 分數
140

安裝套件

flutter pub add markdown_editor_plus

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個增強文字輸入的 Flutter 小部件,具備即時 Markdown 格式化功能。它包裝了 TextField 以支援 Markdown 語法轉換,並包含一個可自訂的工具列,方便格式化。非常適合需要富文本編輯並輸出 Markdown 的應用,例如筆記應用或內容管理系統。該套件支援多種平台,包括行動裝置、網頁和桌面端,確保在不同裝置上行為一致。

適用情境

  • 筆記應用程式
  • 內容創作工具
  • 文件編輯器
  • 部落格撰寫介面
  • 基於 Markdown 的聊天應用

主要特色

  • 即時 Markdown 轉換
  • 可自訂工具列
  • 跨平台相容性
  • 與 TextField 的簡單整合
  • 支援所有主要平台

適合對象

  • 開發支援 Markdown 的表單的開發者
  • 需要輕量級富文本編輯的應用程式
  • 需要跨平台文字輸入的專案
  • 想要直覺 Markdown 格式化的使用者

使用建議

  • 有限的高級格式設定選項
  • 無內建預覽模式
  • 需要手動處理複雜的 Markdown 結構
  • 未針對大文件進行優化
  • 工具列自訂需要基本的Flutter知識

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

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],
)

所屬分類

依賴

依賴清單 4 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。