From b7836dd953f2d3e6e4f014e1606c310ae0795f79 Mon Sep 17 00:00:00 2001 From: Edward Date: Mon, 1 Jan 2024 23:30:23 +0300 Subject: [PATCH] Update README.md --- README.md | 241 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 168 insertions(+), 73 deletions(-) diff --git a/README.md b/README.md index f9e1703..788a4ba 100644 --- a/README.md +++ b/README.md @@ -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
(with default prefix) | Additional / modificator CSS classes
(with default prefix) +--- | --- | --- | --- +`@editorjs/header`
`editorjs-header-with-alignment` | `header` | `.prs-header` | alignment:
`.prs_left`
`.prs_right`
`.prs_center`
`.prs_justify` +`@editorjs/paragraph`
`editorjs-paragraph-with-alignment` | `paragraph` | `.prs-paragraph` | alignment:
`.prs_left`
`.prs_right`
`.prs_center`
`.prs_justify` +`@editorjs/inline-code` | | | +`@editorjs/marker` | | | +`@editorjs/underline` | | | +`@editorjs/list` | `list` | `.prs-list` | additional:
`.prs_ordered` +`@editorjs/raw` | `raw` | | +`@editorjs/simple-image` | `simpleImage` | `.prs-image` | additional:
`.prs_withborder`
`.prs_withbackground`
`.prs_stretched` +`@editorjs/embed` | `embed` | `.prs-embed` | additional:
`.prs_youtube`
`.prs_codepen`
`.prs_vimeo` +`@editorjs/link` | `linkTool` | `.prs-linktool` | additional:
`.prs_title`
`.prs_description` +`@editorjs/delimiter` | `delimiter` | `.prs-delimiter` | +`editorjs-alert` | `alert` | `.prs-alert` | alignment:
`.prs_left`
`.prs_right`
`.prs_center`
additional:
`.prs_primary`
`.prs_secondary`
`.prs_info`
`.prs_success`
`.prs_warning`
`.prs_danger`
`.prs_light`
`.prs_dark` +`@editorjs/warning` | `warning` | `.prs-warning` | +`@editorjs/table` | `table` | `.prs-table` | additional:
`.prs_withheadings` +`@editorjs/quote` | `quote` | `.prs-quote` | alignment:
`.prs_left`
`.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; @@ -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 @@ -88,87 +92,107 @@ Return Editor.js content blocks ### Generated HTML -##### Code +##### Header ```html -
- 
-        
-
-
+

Lorem

``` -##### Embed -###### *(Actually working with Youtube, Codepen & Gfycat)* +##### Paragraph ```html -
- -
+

+ Pellentesque + malesuada fames + tempus +

``` -##### Delimiter +##### Ordered List ```html -
+
    +
  1. +
``` -##### Header +##### Unordered List ```html -

Lorem

+ ``` -##### Link +##### Table ```html - -
-
Title
-
Description
-
https://example.com/
-
-
- -
- + + + + + + + + + + + +
12
ab
``` -##### Ordered List +##### Code ```html -
-
    -
  1. -
+
+ 
+        
+
``` -##### Unordered List +##### Embed +###### *(Actually working with Youtube, Codepen & Gfycat)* ```html -
-
    -
  • -
-
+
+ +
Shrek (2001) Trailer
+
``` -##### Paragraph +##### Delimiter ```html -

- Pellentesque - malesuada fames - tempus -

+
+``` + +##### Link / LinkTool + +```html +
+ + +

Title

+

Description

+ +
``` ##### Image ```html -
- +
+ +
+
+``` + +##### Quote + +```html +
+
``` @@ -177,14 +201,20 @@ Return Editor.js content blocks ```html
- -
-

Title

-

Message

-
+ +

Title

+

Message

``` +##### Alert + +```html +

+ Alert! +

+``` + ##### Raw ```html @@ -192,3 +222,68 @@ Return Editor.js content blocks Raw HTML ...
``` + +## 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