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:

RTA1

Source: http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/

 

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.

Pre-requisite

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).

1

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

2

 

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:

<html>
    <head>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> <!-- the reason for everything. Clean styles-->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"><!-- Styles for right controls-->
        <script src="js/angular.min.js"></script>
        <script src="js/textAngular.min.js"></script>
     </head>
     <body>
         <h1>Hello World!</h1>
     </body>
</html>

3

 

index.html

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

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

 

4

 

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">
    </div>
</body>

5

index.html

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!';
}]);

 

6

js/script.js

 

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

7

 

index.html

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:

8

 

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>

9

index.html

 

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

 

10

script.js

 

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

11

 

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!

 

Debriefing

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>
{{htmlContent}}

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

 

12

index.html

 

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.

13

 

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!

16 thoughts on “Creating a Simple Rich-Text Editor Using AngularJS: TextAngular

  1. 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

  2. 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. 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)

    1. 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.

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

    1. 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.

    2. 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 (https://github.com/fraywing/textAngular) for more information.

  5. 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

    1. 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.

  6. 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

Leave a Reply

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