# What is Sir Trevor?

Sir Trevor provides a means to transform a text input into a rich content editor that's been re-imagined for the web. The content of the editor is stored as HTML inside a JSON object, with the structure and the contents of the post serialized inside of it.

<a name="1"></a>
# Get Started

<a name="1-1"></a>
## Installation

### npm

[npm](https://github.com/npm/npm) package

```
npm install --save sir-trevor
```

### Bower

[Bower](https://github.com/bower/bower) package.

Your `bower.json` file should look something like this:

```js
{
  "name": "your-project",
  "dependencies": {
    "sir-trevor-js": "0.6.0"
  }
}
```

Then run `bower install` on your project to install the necessary dependencies.

Alternatively, grab the following files and include them in your project:

  * [Sir Trevor JS](https://github.com/madebymany/sir-trevor-js/blob/dist/build/sir-trevor.js)

You'll need the following CSS file too:

  * [Sir Trevor CSS](https://github.com/madebymany/sir-trevor-js/blob/dist/build/sir-trevor.css)

And the icons file:

  * [Sir Trevor Icons](https://github.com/madebymany/sir-trevor-js/blob/dist/build/sir-trevor-icons.svg)

<a name="1-2"></a>
## Initialising

A Sir Trevor element must be contained inside a form like follows:

```html
<form>
  <textarea class="js-st-instance"></textarea>
</form>
```

Then to transform this element to a Sir Trevor instance:

```html
<script>
  var editor = new SirTrevor.Editor({
    el: document.querySelector('.js-st-instance'),
    defaultType: 'Text',
    iconUrl: 'build/sir-trevor-icons.svg'
  });
</script>
```

You'll also need to [configure icon url](#1-5)

<a name="1-3"></a>
## The Output

Sir Trevor stores structured JSON that describes your document.

A typical piece of Sir Trevor JSON looks like this:

```js
{
  "data": [{
    "type": "text",
    "data": {
      "text": "<p>Hello, my name is <b>Sir Trevor</b></p>",
      "format": "html"
    }
  }]
}
```

Each piece of JSON is made up of an object that contains the *type* and *data* for the block.

Generally, when rendering Sir Trevor on the server side you should map the types of the blocks to partials that define the presentation of that block, then all you have to do is loop over the JSON data and render the correct partial.

For a server-side example, please see our [Sir Trevor Rails gem](http://github.com/madebymany/sir-trevor-rails). The ideas within this could easily be extrapolated for other languages.

<a name="1-4"></a>
## Retrieving Editor Instances

You can retrieve `SirTrevor.Editor` instance by assigning the editor to a variable.

```js
var editor = new SirTrevor.Editor({});
```

<a name="1-5"></a>
## Icons

### Configuring iconUrl

Icons are included using an external svg file. This will need a url so that the icons can be found. This is set using default.
  
```js
SirTrevor.setDefaults({
  iconUrl: "sir-trevor-icons.svg"
});
```

If you are using Sir Trevor in IE or a browser that doesn't support svg fragments showing it could be because your browser doesn't include svg sprite support.

```html
<script src="../node_modules/svg4everybody/dist/svg4everybody.js" type="text/javascript" charset="utf-8"></script>
<script>svg4everybody();</script>
```

### Customising icons

If you want to customise the icons, or add a custom block you'll want to generate a new icon file. Icons are generated using [Icomoon](https://icomoon.io)

[Source svgs](https://github.com/madebymany/sir-trevor-js/tree/master/public/images/icons/src)

[Icomoon project](https://github.com/madebymany/sir-trevor-js/blob/master/public/images/icons/src/icomoon.json)

Once you've made changes to the icomoon project you can generate the svg file. Extract the svg from the downloaded project and add to your project. You'll also need to set the location of `iconUrl` using the instructions above.
