Textarea Tutorial
HTML and CSS
Create a Basic HTML 5 Page
Let's first create a basic HTML 5 page with <head> and <body> element where we will add content to. Create an index.html file and add the following content:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Convergence Textarea Tutorial</title>
</head>
<body>
<div class="header">
<img alt="convergence-logo" src="https://convergence.io/assets/img/convergence-logo.png" />
<h2>Convergence Collaborative Text Area Tutorial</h2>
</div>
</body>
</html>Add JavaScript Dependencies
Add the following dependencies to the <head> element. The rxjs.umd.min.js and convergence.global.min.js are the main dependencies for the Convergence client. The color-assigner.min.js is a utility used to create colors for collaboration cues. The html-text-collab-ext.min.js is a utility to that adapts a basic HTML Text Area to add collaborative APIs.
index.html
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/rxjs.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@convergence/[email protected]/convergence.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@convergence/[email protected]/umd/color-assigner.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@convergence/[email protected]/umd/html-text-collab-ext.min.js"></script>Add CSS Dependencies
Add the following CSS links to the <head> element. The html-text-collab-ext.min.css imports the styles for the collaborative text area utility. The tutorial.css provides some nice looking style for for this example.
index.html
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@convergence/[email protected]/css/html-text-collab-ext.min.css" />
<link rel="stylesheet" type="text/css" href="tutorial.css" />Add Tutorial HTML Content
Add the following code snippet to the end of the <body> element. This adds the textarea that wil be used as well as some other content.
index.html
<div class="container">
<div class="instructions">Open this page in two browser windows side-by-side and start typing!</div>
<div>
<span class="username-label">Local Username: </span><span id="username"></span>
</div>
<textarea id="textarea"></textarea>
</div>Add Tutorial Scripts
Finally, add the following <body> tags at end of the <body> element that implement the JavaScript side of the example. The tutorial-config.js sets the Convergence connection URL for the Convergence Server you wish to use. The tutorial-data.ja script adds the default text content for collaboration. The tutorial.js script adds the default text content for collaboration.
index.html
<script type="text/javascript" src="tutorial-config.js"></script>
<script type="text/javascript" src="tutorial-data.js"></script>
<script type="text/javascript" src="tutorial.js"></script>Let's create all three of those files as empty script files so that the browser doesn't complain. Create these three files in the same director as the index.html:
- tutorial-config.js
- tutorial-data.js
- tutorial.js
Final HTML Page
The final HTML file should look something like the below:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Convergence Textarea Tutorial</title>
<link rel="stylesheet" type="text/css" href="tutorial.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@convergence/[email protected]/css/html-text-collab-ext.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/rxjs.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@convergence/[email protected]/convergence.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@convergence/[email protected]/umd/html-text-collab-ext.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@convergence/[email protected]/umd/color-assigner.min.js"></script>
</head>
<body>
<div class="header">
<img alt="convergence-logo" src="https://convergence.io/assets/img/convergence-logo.png" />
<h2>Convergence Collaborative Text Area Tutorial</h2>
</div>
<div class="container">
<div class="instructions">Open this page in two browser windows side-by-side and start typing!</div>
<div>
<span class="username-label">Local Username: </span><span id="username"></span>
</div>
<textarea id="textarea"></textarea>
</div>
<script type="text/javascript" src="tutorial-config.js"></script>
<script type="text/javascript" src="tutorial-data.js"></script>
<script type="text/javascript" src="tutorial.js"></script>
</body>
</html>Add Style
Let's add some CSS to make the page look a little better. Create a tutorial.css file and paste in following CSS:
tutorial.css
body {
font-family: Helvetica, sans-serif;
}
.header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
img {
height: 48px;
margin-right: 15px;
}
h2 {
display: inline-block;
}
.container {
width: 500px;
}
.instructions {
font-style: italic;
font-size: 14px;
padding: 5px;
background: #EEEEEE;
border: 1px solid darkgray;
margin-bottom: 15px;
}
.username-label {
font-weight: bold;
}
textarea {
line-height: 1.2;
margin-top: 20px;
padding: 5px;
height: 500px;
width: 100%;
box-sizing: border-box;
}Checkpoint
If everything has gone to plan, if you open up your index.html should should see something like the figure below:
Figure 2: Initial HTML Page
Next we will add the required JavaScript to connect to Convergence.