Sir Trevor JS in Laravel project


Quality Gate Status

Integrate the tool Sir Trevor JS in a Laravel 5/6/7/8/9 project.


This package is available through Packagist and Composer.

For PHP 8 version, use the branch master : "caouecs/sirtrevorjs": "~4.1.0"

For PHP 7 version, use the branch v3.0 : "caouecs/sirtrevorjs": "~3.0.0"

For Laravel >= 5.2 version parser, use the branch v2.5 : "caouecs/sirtrevorjs": "~2.5.0"

For Laravel >= 5.1 version js & amp, use the branch v2.4 : "caouecs/sirtrevorjs": "~2.4.0"

For Laravel >= 5.1 version fb articles, use the branch v2.3 : "caouecs/sirtrevorjs": "~2.3.0"

For Laravel >= 5.1 version view & amp, use the branch v2.2 : "caouecs/sirtrevorjs": "~2.2.0"

For Laravel >= 5.1 version base, use the branch v2.1 : "caouecs/sirtrevorjs": "~2.1.0"

For Laravel 5.0, use the branch v2 : "caouecs/sirtrevorjs": "~2.0.0"

For Laravel 4, use the branch laravel4 : "caouecs/sirtrevorjs": "~1.4"

Please read in the choosen branch.

Service Provider

If you want to use routing, controllers, views, binding directly in your project, in your app/config/app.php, add "Caouecs\Sirtrevorjs\SirtrevorjsServiceProvider" to your list of providers.


To get tweets, this project uses thujohn/twitter. Please visit the page of the project to know how to install and configure.

Configuration file

Next, you must migrate config :

php artisan vendor:publish caouecs/sirtrevorjs

After installation, the config file is located at app/config/packages/caouecs/sirtrevorjs/sir-trevor-js.php.

You can define :

  • the path for image upload
  • the route for upload image
  • the route for tweet
  • the path of Sir Trevor files
  • the list of block types
  • custom blocks
  • the language
  • the paths for Eventable.js and Underscore.js
  • the view
  • configuration for blocks
    • soundcloud
    • gettyimages
  • etc...

SirTrevorJs class


For stylesheets :


For scripts, in your Blade files :


Fix for image block

Function to fix a problem with image block when you add a new image :

    string SirTrevorJs::transformText(string $text);

Find first image

Get first image in text with findImage method :

    string SirTrevorJS::findImage(string $text);

In return, you have url of image or empty string.

Find elements by blocktypes

Get all elements in text, in specified blocktype with find method :

    mixed SirTrevorJS::find(string $text, string $blocktype [, string $output = "json"])

In return, you can have :

  • array, if you choose "array" for $output
  • json, if you choose "json" for $output
  • false, if the script doesn't find an occurence of blocktype



This trait proposes two things :

  • upload image where you want
  • get tweets

Upload image

This project proposes a system for upload image, nothing to configure, just the directory_upload value in config file.

    "directory_upload" => "img/uploads"


This project proposes a system to get tweets. I use thujohn/twitter project.

SirTrevorJsConverter class

This class need a parser, a configuration and a view by default.

You can use the binding of this class :



Convert text from Sir Trevor Js to html :

    string app('caouecs.sirtrevorjs.converter')->toHtml($text)

These methods return a string with html and js codes.


Convert text from Sir Trevor Js to Amp:

    string app('caouecs.sirtrevorjs.converter')->toAmp($text);

All modules have an amp's version, if it exists an equivalence.

This method returns an array ( text and js).

Facebook Instant Articles

Convert text from Sir Trevor Js to Facebook Instant Articles:

    string app('caouecs.sirtrevorjs.converter')->toFb($text);

All modules have an FBArticles's version, if it exists an equivalence.

This method returns a string with html and js codes.

Adding custom blocks

You can choose to add custom blocks in config file or add them by extending SirTrevorJsConverter class.


'customBlocks' => [
    'image_extended' => '\App\SirTrevorConverters\ImageExtendedConverter',


namespace App\SirTrevorConverters;

use \Caouecs\Sirtrevorjs\SirTrevorJsConverter;

class SirTrevorJsConverterEditor extends SirTrevorJsConverter
     * Custom blocks.
     * @var array
    protected $customBlocks = [
        'gallery' => '{Your namespace}\\Editor\\Converter\\GalleryConverterEditor',
        'readmore' => '{Your namespace}\\Editor\\Converter\\ReadMoreConverterEditor',

And you need to call this class in your service provider, in register :

$this->app->bind('editor.converter', function ($app) {
    return new App\SirTrevorConverters\SirTrevorJsConverterEditor(
        new LaravelParser(),


For the moment, the code can convert :