1

I am trying to create a spell checker for my website using bjspell .Now I want to underline words in textarea that are misspelled.Textarea by default does not support styling specific text.One solution that I thought of was to create divs to replace the textareas but that is not a recommended solution.As this spellchecker needs to be reusable across sites.So I am looking for some alternative where though my content is in textarea.But, it should be possible to style it(just like how it works in firefox).

I have thought of creating a directive for it .It would be applied to textarea for the transformation but I am not getting how it would be done. There is some help I found in this question (Underlining text of a textarea) but since angular does not recommend dom manipualtion like the one in this question's answer I dont know how to proceed.

Community
  • 1
  • 1
Raja
  • 118
  • 11
  • I'm quite sure that ``contenteditable`` is the only way to go. – Thomas Jensen Nov 17 '13 at 09:19
  • Thomas if I got you correctly ,you mean I replace the textarea with div having contenteditable attribute as true. – Raja Nov 17 '13 at 09:25
  • Exactly. I think there are numerous articles about how to roll editors with the attribute, you might be able to tailor one of them to your needs: https://www.google.dk/search?q=contenteditable – Thomas Jensen Nov 17 '13 at 09:28
  • You can just fake it, but you'll loose the cursor -> http://jsfiddle.net/yYRwp/ – adeneo Nov 17 '13 at 09:37
  • Thanks for your suggestions thomas and adeneo.But I dont want to add extra div on the page probably I would try to create angular directive that would replace the textarea with div. @adeneo : Is there any way I could get that cursor in div. – Raja Nov 17 '13 at 16:57
  • There are some answer on here that suggest using an animated gif for the cursor, but otherwise there is no way to get the cursor when hiding the text in the textarea and using an underlying div to show bold, underlines etc. This is actually how most editors do it, and also many search bars, where multiple elements on top of each other create a similar effect, even google uses multiple inputs to create suggestions etc. – adeneo Nov 17 '13 at 17:10
  • Well, now that I think about it, there's always a way -> **http://jsfiddle.net/yYRwp/2/** – adeneo Nov 17 '13 at 17:13
  • Great work adeneo...thanks for your help...I think I can now built upon this to create a angular directive for spell checking. @adeneo: is it possible to keep div over textarea where ever it is placed in the page.Currently we are positioning them to be absolute to overlap.Is ther any work around. – Raja Nov 18 '13 at 17:39

0 Answers0