Need: Add @Mention to comments
Native Textarea is not line feed height adaptive, so there are two options
- Textarea JS calculates the height in real time
- Div contenteditable=”true” simulates a Textarea. But you need to emulate placeholder
At first I used Textarea JS to calculate the height (microblogging is the way), but the product required it; Comment boxes should @ others and be highlighted in color. When I got to the last step with vue-tribute, I was told to use divs instead of Textarea for highlighting. You can keep going. So my final solution is:
Div Contenteditable + vue-tribute implements @ Mention functionality
How can simulation be seen in these two articles
How is Textarea highly adaptive?
Textarea adaptive height, div emulates TextaREA editable adaptive height, placeholder uses ICONS
Bug not for me: In Firefox and Safari, div is added with a <br> for no reason. In IOS, when deleted, it is not empty but the length of <br> value is 4 instead of 0
Product 1: Zhihu comment reply
It looks like Draft rich text is used
Comment reply:
Request:
The response:
Answer:
Product 2: Reply to comments on Weibo
Problem: Using textarea box inside can’t click to jump to tweets that appear to be rich text developed by themselves
Research:
1.Mention.js
- github
- demo
- Dependencies: jquery, Typeahead
2. Caret.js + At.js
The core function of AT.js is caret.js
- Gets the position of the caret or the offset from the input
- Now, it’s a simple jquery plug-in, so everyone can use it.
- At.js is also using it
At. Js is no longer maintained and ‘ZURb tribute’ is recommended
- Caret github
- Caret demo
- At github
3. tribute
- tribute github
- tribute demo
- vue-tribute demo
To jump, highlight, not textarea, input. Should be contenteditable = “true”
Conclusion:
Tribute:
The parameter configuration is the same as tribute, except that it is encapsulated for vUE use
Reference:
Sparrow editor: Formerly based on SLATE, now ants develop their own graphite document: Quill
