8

I know there are lots of great rich text editors out there that can easily be ported to angular and plenty of discussion on how to do this, but I'd like to create my own.

I have the basic idea down:

  • create a text area and watch the input and perform a function as the input changes. I am familiar with the ngBindhtml directive, only to the extent that I can apply it to an element.

Any idea how I might be able to create a function that would render plain text into html?

Renaissance
  • 798
  • 5
  • 15
richbai90
  • 4,994
  • 4
  • 50
  • 85
  • 2
    Most editors hide the text area, and display the data being typed into a div in its place. A great way to get started is to look at some really simple examples and then create your directive. – Tim Withers Apr 26 '13 at 02:48
  • 1
    That's a deceptively simple solution to a seemingly complex problem – richbai90 Apr 26 '13 at 02:53
  • You'll also find this necessary: http://stackoverflow.com/questions/263743/how-to-get-caret-position-in-textarea – abject_error Apr 26 '13 at 05:00
  • https://github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js ? – Lee Goddard Sep 12 '13 at 16:13
  • 1
    Have you seen [Textangular](http://textangular.com)? If you're looking to make your own there's probably a lot to be learnt from it. – kyranjamie Feb 07 '14 at 08:43
  • That's exactly what I was looking to do when I wrote this. I'll have to look more into this. – richbai90 Feb 07 '14 at 19:17
  • I could recommend you https://github.com/stevermeister/ngWig that even more lightweight than textangular. Good to learn the basics – Stepan Suvorov Nov 19 '14 at 15:16

2 Answers2

15

I've tried it before but ended up using textAngular.

Basically i replaced the textarea with a iframe, similar to the way tinyMCE does.

The contenteditable on a element allow you to replace the textarea and write directly on the div. You would insert all html elements like headers and text this way. You'll have to handle the cursor position on text, apply styles based on buttons and text selection, etc.

Gui
  • 9,555
  • 10
  • 42
  • 54
  • Some opinions before you start to use [textAngular](https://stackoverflow.com/questions/36079280/rich-text-editor-for-angularjs) – Arnold Vakaria Dec 17 '20 at 21:28
0

Well, I also came across this and created my own editor as I was required to add features like Table addition etc. The repo is still under development but you can some idea by taking a look at this plunkr. Unlike old answers, I have tried to keep it as a component so that it can be reused at many other places as required.

You can star this git repo to stay updated or feel free to add your inputs

Shashank Vivek
  • 16,888
  • 8
  • 62
  • 104