Giter Site home page Giter Site logo

lucasvllima / quill-delta-parser Goto Github PK

View Code? Open in Web Editor NEW

This project forked from nadar/quill-delta-parser

0.0 0.0 0.0 206 KB

A PHP library to parse and render Quill WYSIWYG Deltas into HTML - Flexibel and extendible for custom elements.

License: MIT License

PHP 100.00%

quill-delta-parser's Introduction

Quill Delta to HTML Parser

A PHP library to parse Quill WYSIWYG Deltas into HTML - Flexibel and extendible for custom elements. Every element is parsed by the same mechanism, this makes it easy to extend and understand.

Build Status Maintainability Test Coverage Latest Stable Version Total Downloads License

What is Quill? Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

Installation

The package is only available through composer:

composer require nadar/quill-delta-parser

Usage

use nadar\quill\Lexer;

$lexer = new Lexer($json);

// echoing the html for the given json ops.
echo $lexer->render();

Where $json is the ops json array from quill, for example:

{
  "ops": [
    {
      "insert": "Hello"
    },
    {
      "attributes": {
        "header": 1
      },
      "insert": "\n"
    },
    {
      "insert": "\nThis is the php quill "
    },
    {
      "attributes": {
        "bold": true
      },
      "insert": "parser"
    },
    {
      "insert": "!\n"
    }
  ]
}

This would render the following HTML:

<h1>Hello</h1>
<p><br></p>
<p>This is the php quill <strong>parser</strong>!</p>

Extend the Parser

In order to extend the Parser by adding your own listeneres (this can be the case if you are using quill plugins which generates custom delta code), you have to decide whether its:

  • inline element: Replaces content with new parsed content, this is mostly the case when working with quill extensions.
  • block element: Block elements which encloses the whole input with a tag, for example heading.

An example for a mention plugin which generates the following delta {"insert":{"mention":{"id":"1","value":"Basil","denotationChar":"@"}}} an inline plugin could look like this:

class Mention extends InlineListener
{
    /**
     * {@inheritDoc}
     */
    public function process(Line $line)
    {
      // check if input is json, decodes to an array and checks if the key "mention" 
      // exsts, if yes return the value for this key.
      $mention = $line->insertJsonKey('mention');
      if ($mention) {
            // use default inline behavior, updates the content and append to next "block" element.
            // the value in this example would be "<mention>Basil</mention>".
            $this->updateInput($line, '<mention>'.$mention['value'].'</mention>');
    }
}

Now register the listenere:

$lexer = new Lexer($json);
$lexer->registerListener(new Mention);
echo $lexer->render();

Overide built-in Listeners

Certain listeners (image, video, color) produce a HTML output which maybe not suit your use case, so you have to the option to override the properties of those plugins, example with image tags:

$image = new Image();
$image->wrapper = '<img src="{src}" class="my-image" />';

// override the default plugin from the lexer:
$lexer = new Lexer($json);
$lexer->registerListener($image);
echo $lexer->render();

Debuging

Sometimes the handling of delta and how the data is parsed is very hard to debug and understand. Therefore you can use the debugger class which will print a table with informations about how the data is parsed.

$lexer = new Lexer($json);
$lexer->render(); // make sure to run the render before call debugPrint();
 
$debug = new Debug($lexer);
echo $debug->debugPrint();

There is also a built in docker compose file which provides access to the output.php file. The output.php helps to directly write content with the quill editor while displaying what is rendered including all debug informations. In order to run this docker webserver execute the following command in the root directory of your clone:

docker-compose up

and visit http://localhost:5555/ in your browser.

Credits

quill-delta-parser's People

Contributors

gfaugere avatar jwissels avatar leonelngande avatar lode avatar nadar avatar stijnster avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.