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. It's pretty much straightforward and no need to do a lot of complicating coding for the Javascript's end. If you're not familiar with AngularJS, I suggest taking tutorials to avoid confusion during the tutorials but if you have no knowledge it's fine. If you wanted a straightforward solution in creating this feature then just go with the flow.





Click here for a little headstart on angular and if you know at least the basics of modules, controllers, models, and directives (Woooaaah that's kinda plenty but that's 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 software 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 the tutorial so I won't be downloading this.

  • Font-awesome - They go hand-in-hand with bootstrap. This is to enhance our default fonts. Same thing, CDN will be used for this tutorial.



Make sure to have the first 3 before you get started ;)



1.) Setting up your JS libraries


Let's 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 all set!





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:


[code language="html"]
<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>
[/code]


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, let's 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".


[code language="html"]


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


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:


[code language="javascript"]


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


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


[/code]



6


js/script.js



Let's 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 up and running! The 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:


[code language="html"]


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


[/code]


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 peek 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 bogus data to test our app. Now back to the script.js, lets try adding up <h2>Testing Content</h2> as our sample data



10


script.js



Let's run the app and you should have an output like this:


11



It basically displays the data from your ng-model inside the text area. 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 you're still confused. You might ask how to get the exact contents from the editor? Simple. Everything that's 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:


[code language="language="]


<h3>The raw value: </h3>
{{htmlContent}}


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



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. Let's reload the page and see what happens. In my case, I'll type in 2 more lines with a <pre> formatted text positioned at the center.


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 the 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!

Suggested Posts
Microsoft Exam 70-480 Certification Tips
Microsoft Exam 70-480 Certification Tips

Sharing my tips from my experience when taking Microsoft Exam 70-480.

PHP Tutorials for Beginners - Creating your first PHP program FROM SCRATCH: Basic Authentication, Membership and CRUD functionalities
PHP Tutorials for Beginners - Creating your first PHP program FROM SCRATCH: Basic Authentication, Membership and CRUD functionalities

PHP Tutorials for Beginners - Creating your first PHP program FROM SCRATCH: Basic Authentication, Membership and CRUD functionalities

COBOL Programming Tutorials - Using Routines (Loop) and a Little of User Intervention
COBOL Programming Tutorials - Using Routines (Loop) and a Little of User Intervention

Quick COBOL tutorials with routines (loop) and user input

18 Comments
  • dhanalakshmiReply
    Nov 16, 2015 6:54 AM

    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

    • Kristian
      Nov 17, 2015 5:23 AM

      Hi there! To customize your own toolbar, you can use the attribute “ta-toolbar”. You can refer to this link for the instructions: https://github.com/fraywing/textAngular/wiki/Customising-The-Toolbar

  • mohamed hafez abdallahReply
    April 17, 2016 1:20 PM

    Thank U

    • Kristian
      April 18, 2016 1:47 AM

      You’re welcome!

  • viznuReply
    June 23, 2016 3:30 AM

    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)

    • vaishakReply
      June 23, 2015 3:32 AM

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

      • Kristian
        June 25, 2016 2:42 AM

        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 (https://github.com/fraywing/textAngular/wiki/Customising-The-Toolbar) 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!

    • JohnReply
      July 8, 2016 8:41 PM

      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)

      • Kristian
        July 26, 2016 11:10 PM

        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.

    • Akash ChatterjeeReply
      July 27, 2016 11:36 PM

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

      • Kristian
        July 26, 2016 11:12 PM

        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
        Aug 4, 2016 4:00 PM

        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.

    • SathyaReply
      Sep 7, 2016 3:20 AM

      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

      • Code HathanReply
        Jan 10, 2017 2:50 AM

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

        • Kristian
          Feb 4, 2017 9:32 AM

          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.

      • NajarhasanReply
        June 6, 2017 11:58 PM

        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

        • Aswin SReply
          Oct 13, 2017 12:56 AM

          How to use this rich text editor in angular 2?

          Write a comment
          Notify me for replies