Skip to content

Latest commit

 

History

History
135 lines (91 loc) · 3.76 KB

_1.html.markdown

File metadata and controls

135 lines (91 loc) · 3.76 KB
Raw

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.

Get Started

Installation

npm

npm package

npm install --save sir-trevor

Bower

Bower package.

Your bower.json file should look something like this:

{
  "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:

You'll need the following CSS file too:

And the icons file:

Initialising

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

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

Then to transform this element to a Sir Trevor instance:

<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

The Output

Sir Trevor stores structured JSON that describes your document.

A typical piece of Sir Trevor JSON looks like this:

{
  "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. The ideas within this could easily be extrapolated for other languages.

Retrieving Editor Instances

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

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

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.

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.

<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

Source svgs

Icomoon project

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.