Flutter로 간단한 마크다운 편집기 만들기

현재 Goryon - Atwtxt 모바일 앱이라는 앱을 만들고 있습니다. 이 앱의 몇 가지 기능 중 하나는 twts를 작성할 수 있다는 것입니다(트위터 메시지와 비슷하지만 Markdown을 사용할 수 있습니다).

우리가 만들고 있는 것

시작하자

그렇게 하려면 TextEditingController에 연결된 TextField가 필요합니다.

_textController = TextEditingController()


....

TextFormField(
                        autofocus: true,
                        maxLines: 8,
                        controller: _textController
                        )

그런 다음 텍스트 상자에서 강조 표시된 텍스트를 마크다운 구문으로 둘러싸는 함수를 만들었습니다.

  void _surroundTextSelection(String left, String right) {
    final currentTextValue = _textController.value.text;
    final selection = _textController.selection;
    final middle = selection.textInside(currentTextValue);
    final newTextValue = selection.textBefore(currentTextValue) +
        '$left$middle$right' +
        selection.textAfter(currentTextValue);

    _textController.value = _textController.value.copyWith(
      text: newTextValue,
      selection: TextSelection.collapsed(
        offset: selection.baseOffset + left.length + middle.length,
      ),
    );
  }

왼쪽은 왼쪽에 있는 문자열입니다. 오른쪽은 오른쪽에 있는 문자열입니다.

텍스트를 굵게 표시하려면 다음을 수행하십시오.

_surroundTextSelection('**', '**')

코드 블록 추가

_surroundTextSelection('```

', '

```')

이미지 추가

_surroundTextSelection('![](https://', ')'),

여기에서 전체 코드를 확인하십시오repo. 지금은 여기까지입니다!