Creating a Simple Rich-Text Editor Using AngularJS: TextAngular

Need a text editor for your app? I know some of you don’t know where to start and probably your research could throw you away. If you’re a beginner, probably you’d get intimidated seeing this and figure out how to do it:




I know… I know… my first impression was I’d code each button via html and make sure regardless of what resolution they always stick in place BUUUUT I figured that using the awesome library  called textAngular would speed up things. The library works parallel with AngularJS. Its pretty much straightforward and no need to do a lot of complicating coding for the Javascipts’ end. If you’re not familiar with AngularJS, I suggest to take tutorials to avoid confusions during the tutorials but if you have no knowledge its fine. If you wanted a straightforward solution in creating this feature then just go with the flow.

Click here for a alittle headstart on angular and if you know at least the basics of modules, controllers, models and directives (Woooaaah that’s kinda plenty but thats how angular is. No need to master all of them as long as you get the gist), you’ll go smooth sailing. Maybe even after this, you’ll learn to love using angular on future projects.


The following are the needed softwares in order to use this library:

  • AngularJS – The core library. This is where it gets dependencies. I’m currently using version 1.2.19.
  • Sublime Text/Notepad++ will do. This is optional but it would be better if you have so that it would be easier to read the code.
  • Text Angular Library – The main event for our tutorial.
  • Bootstrap – This is not really a core feature but its Text Angular’s dependent library for styling its buttons (Such as Bold, Italic, center, you know… the ones you see on top on MS Word). I’ll be using CDN as the source for this tutorials so I won’t be downloading this.
  • Font-awesomeThey go hand-in-hand with bootstrap. This is to enhance our default fonts. Same thing, CDN will be used for this for this tutorial.

Make sure to have the first 3 before you get started 😉


1.) Setting up your JS libraries

Lets get started! Create a folder named “MySimpleEditor” and inside it,  have another folder named “js” which we’ll store our libraries (Personally, I saved this is in my desktop).


Next, inside your js folder, place in your AngularJS and textAngular Libraries.



Note: You can also load those 2 through CDN if ever you’re comfortable that way.


Alright we’re set to go!


2.) Loading Bootstrap, Font-Awesome, and Creating a Placeholder Layout

Now go back to your MySimpleEditor folder. Let’s create a file called “index.html“. Inside it, We’ll load up our libraries we placed in earlier together with our external sources with  the following code:

        <link rel="stylesheet" href=""> <!-- the reason for everything. Clean styles-->
        <link rel="stylesheet" href=""><!-- Styles for right controls-->
        <script src="js/angular.min.js"></script>
        <script src="js/textAngular.min.js"></script>
         <h1>Hello World!</h1>




I only placed a simple “Hello World!” shoutout.

Try opening your file in the browser and it should only display “Hello World!




Note: I’ve edited my path name to keep it short and simple for the sake of this tutorial.

Now we’re clear with it, lets modify again our index.html and add up our angular module and controller.

3.) Adding the Angular Module and Controller

We’ll be focusing on the body part of our html. In this case, I’ll name the module “MySimpleEditor” within the body. I’ll make a new <div> tag it will serve as our controller named “MyController“.

<body ng-app="MySimpleEditor">
    <h1>Hello World!</h1>
    <div ng-controller="MyController">



We’ll create a new javascript file named “script.js” saved within the js folder to call those names and put them into action.


In our script.js lets call the module and the controller. Lets also add up a little data-binding sample named “sample” to ensure that we loaded up our libraries flawlessly:

app = angular.module('MySimpleEditor', ['textAngular']); 

app.controller('MyController', ['$scope', function($scope){
    $scope.sample = 'Shout out from the javascript!';





Lets not forget to add up this library to our html together our binding call inside the controller <div>




I won’t be explaining much on the code right now as I’ve mentioned that a pre-requisite would be a little on angular.


Now lets run the app and you should have this output:



Congratulations! You have your angular working! Next step, creating the rich-text editor!


4.) Creating the Rich-text Editor

Now for the main event, on our index.html, inside the controller, add this line of code. This is will automatically display the text editor itself:

<div text-angular ng-model="htmlContent" name="demo-editor" ta-text-editor-class="border-around" ta-html-editor-class="border-around"></div>




The directive text-angular lets the app know that its the part where the text editor should be embedded. I don’t need to explain why did a text editor suddenly appear by calling text-angular as it will be a very very very looooooong story. You can take a peak on the textAngular.js itself if curiosity tells you too. The rest of the attributes are default classes and the name is… just for formalities.

As you’ll notice, our ng-model is named as htmlContent. We’ll be using this for a bogus data to test out app. Now back to the script.js, lets try adding up <h2>Testing Content</h2> as our sample data





Lets run the app and you should have an output like this:



It basically displays the data from your ng-model inside the textarea. You can play with it now and it should work as expected.

Tada! You’re now done creating your own text editor!



BUT WAIT! I know your still confused. You might ask how to get the exact contents from the editor? Simple. Everything thats been typed on the text editor is converted into html tags based on your format. Let’s give it a test run shall we?

On your index.html, lets display the exact data of our model together with its embedded style. Add the following below your <div> model:

<h3>The raw value: </h3>

<h3>The embedded content:</h3>
<div ng-bind-html="htmlContent"></div>





ng-bind-html converts the html tags for the browser to know that it should embed it as an html design, not as a raw text. Lets reload the page and see what happens. In my case, I’ll type in 2 more lines with a <pre> formatted text together with a centered position.



Note that I did not code these formats from the model on the javascript. I used the buttons on the text editor to show you that it really works.

As you’ll notice, the center button(near middle on the right) and the pre button are pressed as they had those formats. Congratulation! We’re done with the tutorials!


Still having troubles? Don’t worry. You can get the source code on my github (Doesn’t include the code on debriefing). Note that there are tiny bits of minor changes on the git such as folder directories and the project name but nevertheless, everything is still the same.


Thanks and happy coding!

I agree to have my personal information transfered to MailChimp ( more information )
Signup today and receive free updates straight in your inbox. I won't share or sell your email address 😀
I hate spam as much as you do so your email address will not be sold or shared with anyone else.



  1. dhanalakshmi

    can u please let me know to remove certain unnecessary option which are displayed in the editor for example i don’t need toggle option

    • kristianguevara

      You’re welcome!

  2. viznu

    Instead of using H1,H2,H3 to vary the size of text I need to increment the font size by giving font size(in number)

  3. vaishak

    Is there any possible way to increase font size by giving font size and not by clicking on H1,H2, and so on.

    • kristianguevara

      Hello vaishak! Regards to font size, I haven’t seen text angular support that feature yet. I took a peek on their documentation just to be sure ( but they didn’t seem to mention anything about font sizes. Maybe in the future they could add that support but as far as I can’t tell there isn’t. Hope that answers your question!

  4. John

    Is there a way to implement some kind of saving feature? My client needs to be able to save what they write in this editor. (Preferably in .html or .txt formats)

    • kristianguevara

      You can save it through your preferred database. Since you have the text embedded with HTML tags, you can save that as is then rendering to HTML would be simple as querying.

  5. Akash Chatterjee

    When i debug , “Uncaught ReferenceError: rangy is not defined” — this error message came in console.
    How can I overcome this ? Please help.

    • kristianguevara

      Sorry I have not encountered that error before. You can try to download my Github project, try to run form there then compare your changes. Maybe you did something wrong along the process.

    • Anthony Drogon

      This comes from newer versions of textAngular, which now requires both the rangy-core and rangy-saveselection modules.

      They are provided minified in dist/textAngular-rangy.min.js, so you may import that file as well before textAngular.min.js and it should work.

      Please refer to textAngular’s github repo ( for more information.

  6. sathya

    hi. can you help me to complete my academic project which is related to code editor?

  7. Sathya

    Hi kristianguevara,

    i need some help from your to complete in-browser code editor which is able to compile and execute python and r programming (codemirror) with angularJs. like other online code editors like codechef,ideone, codepen etc.

    could you pls share your time with me?

    Looking forward

  8. Code Hathan

    HI Team , I would like to display the paging on the editor , like ms word , any help in this regards??

    • kristianguevara

      Hello! Unfortunately you can’t have pages since what you’re writing in the editor is one whole page regardless of the length. Maybe what you mean is you can post it it through series of chunks so it would have subsequent parts.

  9. I want to make email editor so some field are dynamic coming from angular js I want to show as expresion like {{}} but I thought this is not possible in textangular

    like I am writing email

    Dear {{firstName}},

    This is inform you that your account no {{accountnumber}} is this.

    how to do that can you please explain

  10. Aswin S

    How to use this rich text editor in angular 2?

Leave a Reply

Your email address will not be published. Required fields are marked *