https://github.com/UmbraEngineering/quilljs-renderer

Renders an insert-only Quilljs delta into various format like HTML and Markdown
https://github.com/UmbraEngineering/quilljs-renderer

Last synced: about 1 month ago
JSON representation

Renders an insert-only Quilljs delta into various format like HTML and Markdown

• Host: GitHub
• URL: https://github.com/UmbraEngineering/quilljs-renderer
• Owner: UmbraEngineering
• Created: 2014-10-27T11:51:15.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-07-20T13:38:23.000Z (over 6 years ago)
• Last Synced: 2024-10-14T07:54:15.330Z (about 2 months ago)
• Language: JavaScript
• Size: 171 KB
• Stars: 59
• Watchers: 5
• Forks: 21
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-quill - quilljs-renderer - Renders an insert-only Quilljs delta into various format like HTML (Uncategorized / Uncategorized)

README

        

# quilljs-renderer

Renders an insert-only Quilljs delta into various format like HTML and Markdown



## Install

```bash

$ npm install [--save] quilljs-renderer

```

## Basic Usage

```javascript

var renderer  = require('quilljs-renderer');

var Document  = renderer.Document;

// Load the built-in HTML formatter

renderer.loadFormat('html');

// Create a document instance

var doc = new Document([

    {insert: 'Hello, World!', attributes: {bold: true}},

    {insert: '\n', attributes: {align: 'right'}},

    {insert: 'This is a demo of the Quilljs Renderer'},

    {insert: '\n', attributes: {align: 'left'}},

    {insert: 1, attributes: {

        image: 'monkey.png',

        alt: 'Funny monkey picture'

    }}

]);

console.log(doc.convertTo('html'));

```

Result:

```html

Hello, World!
This is a demo of the Quilljs Renderer


```


## Formats

### HTML

The HTML formatter supports a number of options to allow customization of the final output. For example, you can change the line wrapper from `
` to `
`, like this:

```javascript

doc.convertTo('html', {

    line: '

{content}
'

});

```


The following options are supported:

#### line

Defines the line template. Receives the following variables: `lineNumber`, `lineStyle`, and `content`. Default value:

```html

{content}

```


#### styleType

Should styles be rendered using `style=""` attributes or by using ``, ``, etc. One of `'css'` or `'html'`. Default value: `'html'`.


#### styleTags.bold

Defines how to render bold text when using `html` rendering. Receives the following variables: `content`. Default value:

```html

{content}

```

#### styleTags.italic

Defines how to render italic text when using `html` rendering. Receives the following variables: `content`. Default value:

```html

{content}

```

#### styleTags.underline

Defines how to render underlined text when using `html` rendering. Receives the following variables: `content`. Default value:

```html

{content}

```

#### styleTags.strikethrough

Defines how to render striked text when using `html` rendering. Receives the following variables: `content`. Default value:

```html

{content}

```

#### styleTags.color

Defines how to render colored text when using `html` rendering. Receives the following variables: `content`, `color`. Default value:

```html

{content}

```

#### text

Defines how to render text when using `css` rendering. Receives the following variables: `content`, `style`. Default value:

```html

{content}

```

#### link

Defines how to render links. Receives the following variables: `content`, `link`. Default value:

```html

{content}

```

#### embed

Defines the available embed formats. This option should be an object with number keys. The embed templates will receive all attributes defined on the embed's op object as variables. Default value:

```javascript

{

    1: ''

}

```

#### attributes

Defines custom attribute overrides. For example, let's say we want to allow @user style references. We could define these in our deltas using a new attribute:

```javascript

[

    {insert: '@user', attributes: {atref: 'user'}}

]

```

We could render these as links by adding an attribute definition, like this:

```javascript

doc.convertTo('html', {

    attributes: {

        atref: function(node) {

            node.template = '{content}';

        }

    }

})

```

For another example, we could set up the renderer to handle the `author` attribute set by Quill's authorship module:

```javascript

doc.convertTo('html', {

    attributes: {

        author: function(node) {

            node.template = '{content}'

        }

    }

})

```

Or, to get a little fancier, we could do the same thing, but switch out the the authors' names for simple numbers.

```javascript

var users = [ ];

doc.convertTo('html', {

    attributes: {

        author: function(node) {

            node.template = '{content}';

            var index = users.indexOf(node.data.author);

            if (index < 0) {

                index = users.length;

                users.push(node.data.author);

            }

            node.data.author = index;

        }

    }

})

```

This will output HTML more like this:

```html

Within this document, this user will always be known as author "0", which makes it much easier to write generic CSS to stylize different authors.

```