ONLINE CODE EDITOR

Under the Guidance of:

Mrs.B.Sailaja
Assistant Professor,
Vignan’s Institute of Engineering For Women
Department of CSE
Team Members:

K.MEGHANA (17NM1A0575)

S.HARIKA DAMAYANTHI (18NM1A05E4)

S.SANDHYA(19NM5A0515)

V.SUSHMA(19NM5A0517)
 CONTENTS
ABSTRACT
INTRODUCTION
EXISTING SYSTEM
PROBLEMS WITH EXISTING
SYSTEM
PROPOSED SYSTEM
SYSTEM REQUIREMENTS
APPLICATIONS
IMPLIMENTATIONS
RESULT ANALYSIS
REFERENCES
 ABSTRACT

Programming tools are important for programmers to develop software. If the developers have
a good tool, it can help them develop system faster and more accurate. This project proposed the
Online Code Editor that was created for programmers or developers who want to write programs
without any platform requirements or without any specific physical computers. It bases on web
application running on the Private cloud computing. The features of the editor are performed on
web programming languages, e.g. HTML,CSS, and JavaScript. The editor is able to isolate
programming languages by highlighting syntax of programs. Users can create new projects and
files, import and export files that they want on a server. Moreover, Save, Auto save, Delete, and etc.
are the additional functions of the editor. In this research of the text editor development, the open
source software called, “Ace” was used for some functions such as Undo, Redo, and Syntax
highlight.
 INTRODUCTION

An online code editor is a tool that resides on a remote server and is

accessible via browsers. Some online code editors have basic features more
similar to text editors while others are like complete IDEs. ... Some online code
editors focus on one language or even a framework ,for example there are
products that call themselves – java script online code editors or react online
editor. The experimental results indicated that the proposed editor can be
practically used on Private cloud computing. Moreover, the comparison of the
features among the proposed editor running on Private cloud, Notepad++, and
Edit Plus which running on personal computers, was summarized. This project
is a good start for beginners.
 EXISTING SYSTEM

JavaScript is an interpreted language where code is explained and executed

at the runtime. 
The part of the web browser that understands HTML and CSS is called the
rendering engine. However, most browsers also have a JavaScript interpreter.
That’s the part of the browser that understands JavaScript and run JavaScript
programs.
A typical architecture of a browser looks like below:
User interface:
user interface (UI) is the point of human-computer interaction and communication in a device. This can include
display screens, keyboards, a mouse and the appearance of a desktop. It is also the way through which a user
interacts with an application or a website.
 Browser engine:
A browser engine (also known as a layout engine or rendering engine) is a core software component of every
major web browser. The primary job of a browser engine is to transform HTML documents and other resources
of a web page into an interactive visual representation on a user's device.
 Rendering Engine:
Rendering engine is software that draws text and images on the screen. The engine draws structured text from a
document (often HTML), and formats it properly based on the given style declarations.
 
 DESIGN

FIG:SEQUENCE DIAGRAM FOR ONLINE CODE EDITOR

 PROBLEMS WITH EXISTING SYSTEM

Any program/software that we see or use works on the code that runs in
the background. Traditionally coding was used to do in the traditional
editors or even in the basic editors like notepad! These editors used to
provide basic support to the coders.
Some of them were so basic that it was very difficult in writing basic
English level programs in them. As time went by, some programming
languages needed a specific framework and support for further coding and
development it, which was not possible using these editors.
 PROPOSED SYSTEM

Cross-Platform Support: Traditionally, editors used to support

either Windows or Linux . But Our Code Editor is cross-platform. So
it can work on all platforms. Also, the code works on all three
platforms; else, the open-source and proprietary software codes used
to be different.
Many users will use it or might have used it for desktop applications only,
but it also provides great tool support for Web Technologies like; HTML,
CSS, JS.
 IMPLEMENTATION

•<!DOCTYPE html>
•<html>
•    <head>
•        <title></title>
•    </head>
•    <body>
•        <div class="editor">
•            <text area id="html-code"></text area>
•            <text area id="css-code"></text area>
•            <text area id="js-code"></text area>
•            <iframe id="output"></iframe>
•        </div>

    
•<script type="text/java script">
•            function run()
•            {
•                let html Code= document. query Selector(".editor #html-code").value;
•                let css Code="<style>"+ document. Query Selector(".editor #css-code").value+"</style>";
•                let js Code= document. Query Selector(".editor #js-code").value;
•                output. Content Document. body. Inner HTML=html Code + css Code;
•                output. Content Window. eval(js Code);
•            }
•            document.querySelector(".editor #html-code").addEventListener("keyup",run);
•            document.querySelector(".editor #css-code").addEventListener("keyup",run);
•            document.querySelector(".editor #js-code").addEventListener("keyup",run);
•        </script>
•    </body>
•</html>
FIG:SCREENSHOT FOR ONLINE CODE EDITOR
FIG:BEFORE CLICKING BUTTON
FIG:AFTER CLICKING BUTTON
 FUTURE ENHANCEMENTS
Our code editor should be available and accessible to everyone present over
the whole world.
It works as code pen and js fiddle.
We can add other languages like c, c++, python, etc...
To increase the usage the our code editor we are going to add more
programming languages.
It will help to various programmers and developers to write and run code
easily and efficiently without having various cross platforms
 CONCLUSION

The server based code editor is created to run multiple programming as well as web
based languages, and provides the features create file, open file , save file, delet file ,
close file , compile and run file and run project were created to make this editor
complete.
In addition , the advantage of sever based code editor the programmers in the business
or organization can urgently write or modify program source code without any specific
physical computers or without installing the software of programmes.
web based languages HTML,CSS, Java Sript and programming language Java can be
written within this editor in the future.
 REFERENCES

https://onezero.medium.com/the-future-of-code-is-in-your-browser-2c51a
08e8ab2
https://flatlogic.com/blog/12-best-online-code-editors-for-web-developers/
#:~:text=An%20online%20code%20editor%20is,others%20are%20like%20
complete%20IDEs.&text=For%20example%2C%20there%20are%20produ
cts,editors%20or%20react%20online%20editor
https://onezero.medium.com/the-future-of-code-is-in-your-browser-2c51a
08e8ab2
https://www.crio.do/projects/react-code-editor/
https://stackblitz.com/
Thank you