Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/na2axl/deltoid.js
A Delta converter to HTML and plain text.
https://github.com/na2axl/deltoid.js
delta html javascript parser quill quill-delta quill-editor quilljs
Last synced: 7 days ago
JSON representation
A Delta converter to HTML and plain text.
- Host: GitHub
- URL: https://github.com/na2axl/deltoid.js
- Owner: na2axl
- Created: 2017-03-08T22:34:50.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-13T16:02:32.000Z (over 7 years ago)
- Last Synced: 2024-12-18T07:02:13.637Z (about 1 month ago)
- Topics: delta, html, javascript, parser, quill, quill-delta, quill-editor, quilljs
- Language: JavaScript
- Size: 11.7 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Deltoid.js
A Delta parser to HTML and plain text.
## Installation
### Browser
Just include `deltoid.js` in your web page:
```html
```
And then you can use the class `Deltoid` where you want
### Node.js
Install Deltoid in your project with this command:
```shell
npm install deltoid --save
```
And then you can require them later:
```js
var Deltoid = require('deltoid');
```
### Require.js
Deltoid can be accessed as an asynchronous module with require.js:
```js
require(['path/to/deltoid.js'], function (Deltoid) {
// Do your stuff...
});
```
## How to use ?
Once Deltoid is installed, to use it you just have to create a new instance of Deltoid and give it required parameters:
```js
var deltaParser = new Deltoid(delta, options);
```
* The `delta` parameter is the Delta to parse. It can be an `object` or a `string` which can be parsed to object.
* The `options` parameter is optional. It define the `tokens` to use when Deltoid will parse the Delta to HTML.
Supported tokens and their format:
```js
{
line: "
{content}",
bold: "{content}",
italic: "{content}",
strike: "{content}",
underline: "{content}",
script: {
sub: "{content}",
super: "{content}"
},
list: {
ordered: "{content}
",
unordered: "- {content}
item: "
},
header: [
"",
"
{content}
","
{content}
","
{content}
","
{content}
","
{content}
","
{content}
"],
link: "{content}",
image: "
formula: "{formula}",
blockquote: "
{content}",
"code-block": "
{content}"
}
```
## Examples
```js
var delta = {
ops: [
{
insert: "Hello ",
attributes: {
bold: true,
underline: true
}
},
{
insert: "world!",
attributes: {
italic: true
}
}
]
};
var d1 = new Deltoid(delta);
var d2 = new Deltoid(delta, {
tokens: {
bold: "{content}",
italic: "{content}",
}
})
var parsed1 = d1.parse();
var parsed2 = d2.parse();
parsed1.toHTML(); // =>
Hello world!
parsed1.toPlainText(); // => Hello world!
parsed2.toHTML(); // =>
Hello world!
parsed2.toPlainText(); // => Hello world!
```