Firepad is an open-source, collaborative code and text editor. It is designed to be embedded inside larger web applications.
Join our Firebase Google Group to ask questions, request features, or share your Firepad apps with the community.
- Getting Started With Firebase
- Live Demo
- Downloading Firepad
- Documentation
- Examples
- Contributing
- Repo Structure
Firepad requires Firebase in order to sync and store data. Firebase is a suite of integrated products designed to help you develop your app, grow your user base, and earn money. You can sign up here for a free account.
Visit firepad.io to see a live demo of Firepad in rich text mode, or the examples page to see it setup for collaborative code editing.
Firepad uses Firebase as a backend, so it requires no server-side code. It can be added to any web app by including a few JavaScript files:
<head>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
<!-- CodeMirror -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css"/>
<!-- Firepad -->
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.css" />
<script src="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.min.js"></script>
</head>Then, you need to initialize the Firebase SDK and Firepad:
<body onload="init()">
<div id="firepad"></div>
<script>
function init() {
// Initialize the Firebase SDK.
firebase.initializeApp({
apiKey: '<API_KEY>',
databaseURL: 'https://<DATABASE_NAME>.firebaseio.com'
});
// Get Firebase Database reference.
var firepadRef = firebase.database().ref();
// Create CodeMirror (with lineWrapping on).
var codeMirror = CodeMirror(document.getElementById('firepad'), { lineWrapping: true });
// Create Firepad (with rich text toolbar and shortcuts enabled).
var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
{ richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!' });
}
</script>
</body>Firepad supports rich text editing with CodeMirror and code editing via Ace. Check out the detailed setup instructions at firepad.io/docs.
You can find some Firepad examples here.
Set INVIGOS_PATH var to where you storing project
INVIGOS_PATH='/home/alukin/proj/Invigos/E6Invigos'
(on Linux it can be saved inside ~/.profile so you don't need to re-type it each time)
after that you can use npm run deploy to deploy built script into your webapp folder
If you'd like to contribute to Firepad, please first read through our contribution guidelines. Local setup instructions are available here.
Here are some highlights of the directory structure and notable source files:
dist/- output directory for all files generated by grunt (firepad.js,firepad.min.js,firepad.css,firepad.eot).examples/- examples of embedding Firepad.font/- icon font used for rich text toolbar.lib/firepad.js- Entry point for Firepad.text-operation.js,client.js- Heart of the Operation Transformation implementation. Based on ot.js but extended to allow arbitrary attributes on text (for representing rich-text).annotation-list.js- A data model for representing annotations on text (i.e. spans of text with a particular set of attributes).rich-text-codemirror.js- UsesAnnotationListto track annotations on the text and maintain the appropriate set of markers on a CodeMirror instance.firebase-adapter.js- Handles integration with Firebase (appending operations, triggering retries, presence, etc.).
test/- Jasmine tests for Firepad (many of these were borrowed from ot.js).
I created a couple of files so we can have some playground with the editor changes, some of them are only for invigos, others are global for the editor.
examples/- This has all the examples made by the firepad people (some of them are awesome)invigos.html- this is the file that you can run to check the changes (some configs are there as well)invigos.css- this is just a dumb css file with some non-important styles
Usually you don't need manually handle building of firepad, but if you want to debug something locally you may need to do that.
Set INVIGOS_PATH var to where you storing project
e.g. INVIGOS_PATH='/home/alukin/proj/Invigos/E6Invigos'
(on Linux it can be saved inside ~/.profile so you don't need to re-type it each time)
after that you can use npm run deploy to build and deploy resulting firepad lib into your webapp folder
This project is using some cool libraries for compiling, is called Grunt. Grunt is a well known javascript task runner that is commonly used for handling the minification, obfuscation, etc of a javascript based project. The way its used (in a very basic way) is running the command:
$ grunt watchAnd this will be listening for any changes on the javascript and compiling in "real time".
For our jenkins we need to have this command line:
$ grunt buildAnd this will make the changes to the files:
dist/- Compiled (built) files directoryfirepad.js- non minified file (normally we use this one on invigos for sencha cmd to build it)firepad.min.js- this is the minified filefirepad.css- css file for the editor