How to embed a text editor on your website

Embed content on your website from real-time updated read URLs.
Let people write from within your website with embedded write URLs.

CSS and Javascript includes

Please include the following CSS and Javascript files in the head-section of your HTML-file:

<link rel="stylesheet" href="http://www.writeurl.com/style.css" type="text/css">
<script src="http://www.writeurl.com/script.js"></script>

Simple Embedding

Write URL

Appends a writable document to the specified DOM element or DOM id with the given document ids.

nbe.site.embed_write(element or DOM id, {
	id : 'document id',
	read : 'read id',
	write : 'write id'
});

Write URL example

Read URL

Appends a readable document to the specified DOM element or DOM id with the given document ids.

nbe.site.embed_read(element or DOM id, {
	id : 'document id',
	read : 'read id'
});

Read URL example

New Write URL

Appends a new document and returns the document ids.

var ids = nbe.site.embed_new(element or DOM id);

New write URL example

General Embedding

A more general approach of embedding is using the embed-funtion with a number of options.

Function

nbe.site.embed(text, title, panel, ids, new_doc, ws_url, local_storage, html_title, callback);

General embedding example

Placeholders

The placeholders are DOM elements or DOM ids where parts of the document will be appended. Specify null to not append a given part.

text - the text content of the document.
title - the title of the document.
panel - the format panel of the document.

Possible values

DOM element or DOM id or null

Document Ids

An object with the ids of the document to be displayed. The values are strings of characters [a-z0-9]. If write is null, the editor is a read only editor.

var ids = {
	id : 'document id',
	read : 'read id',
	write : 'write id' or null
}

New document

A boolean that designates whether the document with the ids is new or not. If it is not new, a document with the specified ids must exist on the server.

var new_doc = true or false;

Websocket URL

The url for the web socket. The writeurl server uses 'ws://www.writeurl.com/operations'.

var ws_url = 'ws://www.writeurl.com/operations';

Local storage

A boolean that controls the use of local storage to store the document.

var local_storage = true or false;

HTML title

A boolean that tells whether the html page title should be set to the title of the document.

var html_title = true or false;

Callback

A function that is called at certain events. The important keys are:

nunsaved - the number of unsaved operations. The important point is whether the value is zero or not.
network - the value connected means that there is a connection to the server, anythng else that there is no connection.

var callback = function (key, value) {};

CSS Classes

The WriteURL CSS classes in www.writeurl.com/style.css are prefixed with wu-. Here are some examples of main classes and what elements they style:

.wu-editor - styles the text element.

.wu-root - styles the element containing text lines.

.wu-title - styles the title input element in a write URL.

.wu-format-panel - styles the format panel element.