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-awesome – They 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:
<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>
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"> </div> </body>
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:
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>
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.
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!