esign/inline-edit

use inline editing for text and translations

1.1.2 2022-08-18 13:50 UTC

Requires

• php: ^8.0
• illuminate/support: ^8.0|^9.0

Requires (Dev)

• friendsofphp/php-cs-fixer: ^3.5
• orchestra/testbench: ^6.0|^7.0
• phpunit/phpunit: ^9.0

MIT

• Tijl CLottemans

• inline
• laravel
• editing
• esign

README

This package enables you to edit your websites text and translations inline.

Installation

You can install the package via composer:

composer require esign/inline-edit

The package will automatically register a service provider.

Next up, you can publish the configuration file:

php artisan vendor:publish --provider="Esign\InlineEdit\InlineEditServiceProvider" --tag=config --tag=public

Publish the InlineEdit file to use it in your frontend.

php artisan inline-editing:install

The file will be copied to resources/assets/js/utils/InlineEdit.js

Add the following to your app.js

import InlineEdit from './utils/inlineEdit';

InlineEdit();

To use the rich text editor, include de ckeditor cdn before including your app.js file by adding the following line to your app.blade.php file:

<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/balloon/ckeditor.js"></script>

Make the base url public by adding following line to your app.blade.php file.

<script>var base_url = '{{ config('app.url') }}';</script>

Make sure you have an accessible csrf token by adding

<meta name="csrf-token" content="{{ csrf_token() }}">

Include the inline edit css by adding

<link rel="stylesheet" href="{{ asset('assets/css/inline-edit.css') }}">

Usage

This package assumes you have a translations table in your database with these required columns term, type, value. The default table is dictionary but can be changed any other table by changing the specified table in the config file.

You can use the inline editor by calling following function in your blade files

{!! esign_inline('term') !!}

Depending on the type of the term the richtext editor will be loaded. Supported types are text, richtext

!! IMPORTANT !!
It is important to protect the inline edit routes so only admins can use the functionality. This package does not handle authentication

You can add a middleware to the config file that handles the authentication.

The available options are default limited to 'styles', 'bold', 'italic', 'link', 'blockQuote' but can be expanded in the inlineEdit.js file.

For all available options check: https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html

Testing

composer test

License

The MIT License (MIT). Please see License File for more information.