Angular JS Editor App

This article shows how to build an easy application (Text Editor) for yourself using Angular JavaScript. You can change the code to attach some extra functionality to your editor because it simply uses your knowledge of HTML, CSS and JavaScript.

So are you ready for this.

How to Build

The procedure for building this application is as easy as writing a hello world program using recursion, what you need is only the skills in HTML, CSS and JS.

There are generally 3 steps in it:


Step 1: HTML Coding

In this very first step you only need to perform a base HTML coding operation by calling or accessing functionalities of angular js in it via a tag like ng-app, ng-controller and other (mentioned in the code).



Code Snippet

<div id="main" ng-app ng-controller="inlineEditorController" ng-click="hideTooltip()">

<div class="tooltip" ng-clcik="$event.stopPropagation()" ng-show="showtooltip">

<input type="text" ng-model="value"/>

</div>

<p ng-click="toggleTooltip($event)">{{value}}</p>

</div>

Step 2: CSS Coding

In the CSS page we will define the structural overview and some design aspects of the editor, it is totally on you. (Like how you want to see your editor in the form of color, size, width, height and several other respective aspects and properties.)



Code Snippet

*(

margin:1;

padding:0;

}

body

{

    font:15px/1.4 'Tahoma', tahoma;

    color: Fuchsia;

    text-align:center;

}

a, a:visited

{

    outline:none;

    color:Teal;

}

a:hover

{

    text-decoration:blink;

}

 

section, footer, header, aside, nav

{

    display:block;

}

.tooltip

{

    background-color:#5c9bb7;

    background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);

    background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);

    background-image:linear-gradient(top, #5c9bb7, #5392ad);

   

    box-shadow: 0 1px 1px #ccc;

    border-radius:3px;

    width: 280px;

    padding: 10px;

   

    position: absolute;

    left: 50%;

    margin-left:-150px;

    top: 80px;

}

 

.tooltip:after

{

 content:'';

 position:absolute;

 border:6px solid #5190ac;

 border-color:#5190ac transparent transparent;

 width:0;

 height:0;

 bottom:-12px;

 left:50%;

 margin-left:-6px;

}

 

.tooltip input

{

    border: none;

    width: 100%;

    line-height:32px;

    border-shadow: 0 2px 6px #bbb insct;

    border-radius: 3px;

    text-align:center;

    font-size:16px;

    font-family:inherit;

    color:#8d9395;

    font-weight:bold;

    outline:none;

}

 

p

{

    font-size:22px;

    font-weight:bold;

    color:#6d8088;

    height: 30px;

    cursor:default;

}

 

p b

{

    color:#ffffff;

    display:inline-block;

    padding:5px 10px;

    background-color:#c4d7e0;

    border-radius:2px;

    text-transform:lowercase;

    font-size:18px;

}

 

p:before

{

    content:normal;

    display:inline-block;

    margin-right:5px;

    font-weight:normal;

    vertical-align:text-bottom;

}

 

#main

{

    height:300px;

    position:relative;

    padding-top:150px;

}

Step 3: JS Coding

This is the main coding page in which we will define the functionality of this editor and how its going to work in the real word. In spite of all these there are several other related aspects too.



Code Snippet

function inlineEditorController($scope)

{

    $scope.showtooltip = false;

    $scope.value = 'Edit me.'; 

    $scope.hideTooltip = function ()

    { 

        $scope.showtooltip = false; 

    }  

    $scope.toggleTooltip = function (f)

     { 

        f.stoppropagation();

        $scope.showtooltip = !$scope.showtooltip; 

    }

}

Output Window

When you will these code snippets you will get a primary output window as in the following (if there is no error):

Afterwards on clicking the “Please Alter” button you will get a box open for you, something like that.

In this box:

• Click on the box
• Select the “Please Alter” and remove it
• Start writing now