search

ritz078 / ng-embed

An AngularJS filter/directive for embedding emojis, media, maps, tweets, code and services
http://riteshkr.com/ng-embed
MIT License
122 stars 35 forks source link

if I can edit the text and Emoticons like in html editor? make it be editable #24

Open haisapan opened 8 years ago

haisapan commented 8 years ago

I only see the ngEmbed is for show, how can i edit it's content like in html editor? for example, I want use it in a comment box, any help?

shyamal890 commented 8 years ago

This can be done with content-editable div. However, when a text is converted to html, the cursor position would change. This can be handled with rangy library.

ritz078 commented 8 years ago

I would definitely appreciate some help on this both for this library and embed.js

chancezeus commented 8 years ago

A quick (and dirty) suggestion is placing an (absolute positioned) textarea (with transparent background) on top of an ng-embed and show/hide the ng-embed with ng-if (to trigger a redraw) (it's best to also change the text color of the textarea to transparent, but keep in mind that some browsers/platforms also change the cursor color to transparent in that case) based on user input (ie. 1s timeout to show and hide again on keydown/mousedown/input/etc)... The downside is you have to take care of spacing and height (otherwise the textarea would collapse to 0. I actually use a similar approach combined with a mirror <pre> element to autogrow my textarea whilst typing (up to a max height). The upside is that you don't have to fiddle around with contenteditable and the original text remains intact whilst typing (so you can change it in case a certain combination get's accidentally converted (maybe a :) combo)