Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@Edd-G
Edd-G authored Jan 1, 2024
1 parent 8ed636c commit b7836dd
Showing 1 changed file with 168 additions and 73 deletions.
241 changes: 168 additions & 73 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,38 @@
[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)
# Simple PHP Parser for Editor.js

Parse to HTML clean JSON Data from [Editor.js](https://editorjs.io/ "Editor.js Homepage")
Parse data for [Editor.js](https://editorjs.io/ "Editor.js Homepage") with 2 way:
1. Parse JSON data to HTML
2. Parse HTML to JSON data
## Supported Tools

Package | Key | Main CSS Class<br>(with default prefix) | Additional / modificator CSS classes<br>(with default prefix)
--- | --- | --- | ---
`@editorjs/header`<br>`editorjs-header-with-alignment` | `header` | `.prs-header` | alignment:<br>`.prs_left`<br>`.prs_right`<br>`.prs_center`<br>`.prs_justify`
`@editorjs/paragraph`<br>`editorjs-paragraph-with-alignment` | `paragraph` | `.prs-paragraph` | alignment:<br>`.prs_left`<br>`.prs_right`<br>`.prs_center`<br>`.prs_justify`
`@editorjs/inline-code` | | |
`@editorjs/marker` | | |
`@editorjs/underline` | | |
`@editorjs/list` | `list` | `.prs-list` | additional:<br>`.prs_ordered`
`@editorjs/raw` | `raw` | |
`@editorjs/simple-image` | `simpleImage` | `.prs-image` | additional:<br>`.prs_withborder`<br>`.prs_withbackground`<br>`.prs_stretched`
`@editorjs/embed` | `embed` | `.prs-embed` | additional:<br>`.prs_youtube`<br>`.prs_codepen`<br>`.prs_vimeo`
`@editorjs/link` | `linkTool` | `.prs-linktool` | additional:<br>`.prs_title`<br>`.prs_description`
`@editorjs/delimiter` | `delimiter` | `.prs-delimiter` |
`editorjs-alert` | `alert` | `.prs-alert` | alignment:<br>`.prs_left`<br>`.prs_right`<br>`.prs_center`<br>additional:<br>`.prs_primary`<br>`.prs_secondary`<br>`.prs_info`<br>`.prs_success`<br>`.prs_warning`<br>`.prs_danger`<br>`.prs_light`<br>`.prs_dark`
`@editorjs/warning` | `warning` | `.prs-warning` |
`@editorjs/table` | `table` | `.prs-table` | additional:<br>`.prs_withheadings`
`@editorjs/quote` | `quote` | `.prs-quote` | alignment:<br>`.prs_left`<br>`.prs_center`
`@editorjs/code` | `code` | `.prs-code`

## Installation

```
composer require boring-dragon/editorjs-simple-html-parser
composer require edd-g/editorjs-simple-html-parser
```
## 1. JSON to HTML Parser

## Usage
### Usage

```php
use Durlecode\EJSParser\Parser;
Expand Down Expand Up @@ -47,26 +70,7 @@ $parser->setPrefix("cat");

$parsed = $parser->toHtml();
```

## Supported Tools

Package | Key | Main CSS Class
--- | --- | ---
`@editorjs/code` | `code` | `.prs-code`
`@editorjs/embed` | `embed` | `.prs-embed`
`@editorjs/delimiter` | `delimiter` | `.prs-delimiter`
`@editorjs/header` | `header` | `.prs-h{header-level}`
`@editorjs/inline-code` | |
`@editorjs/link` | `link` | `.prs-link`
`@editorjs/list` | `list` | `.prs-list`
`@editorjs/marker` | |
`@editorjs/paragraph` | `paragraph` | `.prs-paragraph`
`@editorjs/raw` | `raw` |
`@editorjs/simple-image` | `simpleImage` | `.prs-image`
`@editorjs/warning` | `warning` | `.prs-warning`
`@editorjs/quote` | `quote` | `.prs-quote`

## Methods
### Methods

#### `toHtml()`
Return generated HTML
Expand All @@ -88,87 +92,107 @@ Return Editor.js content blocks

### Generated HTML

##### Code
##### Header

```html
<div class="prs-code">
<pre>
<code></code>
</pre>
</div>
<h2 class="prs-header prs_center">Lorem</h2>
```

##### Embed
###### *(Actually working with Youtube, Codepen & Gfycat)*
##### Paragraph

```html
<div class="prs-embed">
<iframe src="" height="300"></iframe>
</div>
<p class="prs-paragraph prs_center">
<code class="inline-code">Pellentesque</code>
<i>malesuada fames</i>
<mark class="cdx-marker">tempus</mark>
</p>
```

##### Delimiter
##### Ordered List

```html
<hr class="prs-delimiter">
<ol class="prs-list prs_ordered">
<li></li>
</ol>
```

##### Header
##### Unordered List

```html
<h2 class="prs-h2">Lorem</h2>
<ul class="prs-list">
<li></li>
</ul>
```

##### Link
##### Table

```html
<a href="https://github.com/" target="_blank" class="prs-link">
<div class="prs-link-container-with-img">
<div class="prs-link-title">Title</div>
<div class="prs-link-description">Description</div>
<div class="prs-link-url">https://example.com/</div>
</div>
<div class="prs-link-img-container">
<img src="https://example.com/cat.png" alt="">
</div>
</a>
<table class="prs-table prs_withheadings">
<thead>
<tr>
<th>1</th><th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td><td>b</td>
</tr>
</tbody>
</table>
```

##### Ordered List
##### Code

```html
<div class="prs-list">
<ol>
<li></li>
</ol>
<div class="prs-code">
<pre>
<code></code>
</pre>
</div>
```

##### Unordered List
##### Embed
###### *(Actually working with Youtube, Codepen & Gfycat)*

```html
<div class="prs-list">
<ul>
<li></li>
</ul>
</div>
<figure class="prs-embed prs_youtube">
<iframe width="580" height="320" src="https://www.youtube.com/embed/CwXOrWvPBPk" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="1"></iframe>
<figcaption>Shrek (2001) Trailer</figcaption>
</figure>
```

##### Paragraph
##### Delimiter

```html
<p class="prs-paragraph">
<code class="inline-code">Pellentesque</code>
<i>malesuada fames</i>
<mark class="cdx-marker">tempus</mark>
</p>
<hr class="prs-delimiter">
```

##### Link / LinkTool

```html
<figure class="prs-linkTool">
<a href="https://github.com/">
<img src="https://example.com/cat.png" alt="">
<p class="prs_title">Title</p>
<p class="prs_description">Description</p>
</a>
</figure>
```

##### Image

```html
<figure class="prs-image">
<img src="" class="prs-image-border prs-image-background" alt="">
<figure class="prs-image prs_withborder prs_withbackground prs_stretched">
<img src="" alt="">
<figcaption></figcaption>
</figure>
```

##### Quote

```html
<figure class="prs-quote prs_center">
<blockquote></blockquote>
<figcaption></figcaption>
</figure>
```
Expand All @@ -177,18 +201,89 @@ Return Editor.js content blocks

```html
<div class="prs-warning">
<ion-icon name="information-outline" size="large" aria-label="information outline"></ion-icon>
<div>
<p>Title</p>
<p>Message</p>
</div>
<i></i>
<h4>Title</h4>
<p>Message</p>
</div>
```

##### Alert

```html
<p class="prs-alert prs_center prs_success">
Alert!
</p>
```

##### Raw

```html
<div class="prs-raw">
Raw HTML ...
</div>
```

## 2. HTML to JSON Parser

### Usage

```php
use Durlecode\EJSParser\HtmlParser;

$parser = new HtmlParser($html);

$blocks = $parser->toBlocks();

header("Content-Type: application/json");
echo $blocks;
```

Where `$html` is the HTML specially tagged with CSS classes *See examples of the generated HTML code above*

By default this will parse html with css classes with `prs` prefix, so if you want to change it, follow example below

```php
use Durlecode\EJSParser\HtmlParser;

$parser = new HtmlParser($html);

$parser->setPrefix("cat");

$blocks = $parser->toBlocks();
```

You may set time and version EditorJS generated blocks *By default: time generate auto, EditorJS version pass from config.php*:

```php
use Durlecode\EJSParser\HtmlParser;

$parser = new HtmlParser($html);

$parser->setTime("1703787424242");
$parser->setVersion("2.28.8");

$blocks = $parser->toBlocks();
```

### Methods

#### `toBlocks()`
Return generated EditorJS Blocks

#### `setPrefix(string $prefix)`
Set CSS classes Prefix

#### `getPrefix()`
Return current prefix

#### `setVersion(string $version)`
Set Editor.js content version

#### `getVersion()`
Return Editor.js content version

#### `getTime()`
Return Editor.js content timestamp

#### `setTime(string $time)`
Set Editor.js content timestamp

0 comments on commit b7836dd

Please sign in to comment.