Giter Club home page Giter Club logo

rich_textfield's Introduction

rich_textfield

flutter富文本输入框,支持表情、@某人、#话题#

The example screen shot

使用方法

import 'package:rich_textfield/rich_textfield.dart';
MyTextEditingController _editCtrl = new MyTextEditingController(
  topicStyle: new TextStyle(
    fontWeight: FontWeight.bold,
    color: Colors.yellow
  ),
  atStyle: new TextStyle(
    fontWeight: FontWeight.bold,
    color: Colors.green
  ),
  emojiImgSourceType: EmojiImgSourceType.asset
);

Widget ret = new MyTextField(
  controller: _editCtrl,
  focusNode: _focusNode,
  style: new TextStyle(
    fontSize: 20,
    color: const Color.fromARGB(255, 180, 180, 180)
  ),
);

rich_textfield's People

Contributors

hyz1992 avatar

Stargazers

gch avatar 猫久 avatar  avatar Blake avatar  avatar dev avatar ReverseScale avatar  avatar KNightING avatar  avatar  avatar  avatar  avatar Wren avatar Jarvi avatar  avatar HuiHui avatar

Watchers

 avatar

rich_textfield's Issues

发现几个bug

MyEditableTextState这个类, 忘记实现TextInputClientupdateFloatingCursor方法。

rich_textfield-1.0.0/lib/edit/my_editable_text.dart:398:7: Error: The non-abstract class
MyEditableTextState' is missing implementations for these members:
- TextInputClient.updateFloatingCursor                                 
Try to either                                                           
- provide an implementation,                                           
- inherit an implementation from a superclass or mixin,                
- mark the class as abstract, or                                       
- provide a 'noSuchMethod' implementation.        

ps:我使用是master版本 (Channel master, v1.3.1-pre.5, on Linux, locale zh_CN.UTF-8)

如果表情在文本框最前面,然后插入表情|@|话题,就会出现重叠现象。

Image of Yaktocat

如果 表情|@|话题先插入输入框, 然后想在这个表情|@|话题前面添加 新的表情|@|话题,就发现插不入,文字输入就没什么问题。

输入框里的表情文字不在同一水平上。

这个输入框及富文本显示控件的扩展思路是什么

请教几个问题 <~>:
1.输入框的扩展思路是什么,有什么基础控件参考不?
2.富文本您这边也是基于字节跳动的改的么?后来扩展的原因和思路是什么?
3.我看输入框这边的图片占位符由"\u200B"替换为了一个汉字,当时这么做的原因是啥?

几个建议

1、表情的话,通过controller传入表情列表

Map<String, String> emojis = {
"[强]":"resUrl",
"[微笑]":"resUrl",
}

只要文本变化时正则匹配到"\[[\u4e00-\u9fa5]+]"就尝试认为是一个表情,把这个匹配字符串拿去表情列表里匹配一下,匹配得到就可以显示表情,类似我只要文本输入"[强]"就可以显示表情了,复制的时候也允许复制得到"[强]"字符串。这个做法有点类似微信

2、可以考虑处理一下,允许插入大图(比如相册图片)
3、可以在非编辑状态的时候允许复制,这样就可以抛弃字节跳动的那个richtext了,单纯要显示的时候,只要把这个控件设置成只读就可以了
4、表情最好分成系统表情和普通表情,系统表情正常资源是在本地,普通表情正常资源是在网上

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.