Download the PHP package awcodes/scribble without Composer

Scribble

A Rich Text Editor plugin for Filament Forms.

Installation

Install the package via composer

Publishing the config

Publishing the translations

[!IMPORTANT] If you have not set up a custom theme and are using a Panel follow the instructions in the Filament Docs first. The following applies to both the Panels Package and the standalone Forms package.

Import the plugin's stylesheet (if not already included) into your theme's css file.

Add the plugin's views to your tailwind.config.js file.

Rebuild your custom theme.

Preparing your model

Scribble stores its content as JSON data in a single column on your model. So, it is vital that you cast the column to an array or json object in your model.

It is also recommended to make the column alongText type in your migration. However, this is not required and if you know you will not need a large amount of data you can use a text or mediumText type as well. Just be aware that the content can grow rather quickly.

Usage

Form Component

Infolist Entry

Global Configuration

In the boot method of a ServiceProvider you can set the default configuration for all instances of the editor with the configureUsing method.

Editor Profiles

Manually, creating menu configurations for each instance of the editor can be cumbersome. To alleviate this, you can create a profile class that defines the tools for the bubble, suggestion, and toolbar menus. You can then apply the profile to the editor using the profile method. You may use either the tool identifier for the tools class name.

Generating a Profile

You can scaffold out a new profile class using the make:scribble-profile command and following the prompts.

Custom Editor Styles

Should you need to provide styles to the editor for custom blocks or tools, you can use the customStyles method to provide a path to a CSS file.

Extending the Editor

Custom Tools

Commands

Command tools are used to insert content into the editor using Tiptap commands. The Bold and Italic tools are examples of this. This is also the default tool type.

Static Blocks

Static Blocks are a tool type that can be used to insert a static blade view into the editor. These are useful for inserting placeholder content that can be rendered out to a different view in your HTML. For instance, a block that represents a list of FAQs that when rendered on the front-end will display a list of FAQs from the database.

$editorView is optional but can be useful in the case that you need to provide a custom editor view for the block. And a different rendering view for the output.

Blocks

Blocks are a tool type that interact with the editor's content through a modal form and a blade view. They can be used to insert custom content into the editor.

$editorView is optional but can be useful in the case that you need to provide a custom editor view for the block. And a different rendering view for the output.

See the Pounce plugin docs for more information on the Alignment, MaxWidth, and SlideDirection.

Tool class

Modal Form

Blade View

Modals

Modals are a tool type that interact with the editor's content through a modal form and use Tiptap commands to insert content into the editor. The Media and Grid tools are examples of this.

Tool class

Modal Form

Events

You may also create tools that emit events when they are clicked. This can be useful for triggering actions in your application when a tool is clicked.

Tool class

Generating a Tool

You can scaffold out a new tool class using the make:scribble-tool command and following the prompts.

Custom Tiptap Extensions

You can also provide custom Tiptap extensions or other Tiptap native extensions to the editor. This can be useful for adding custom marks, nodes, or other extensions to the editor.

Javascript

Next you will need to load your js file in your layout or view before Filament's scripts. This can be done in a way you see fit for you application.

For example, with a Filament Panel you could do something like the following:

PHP Parser

In order for the content to be able to be converted to HTML, you will need to provide a PHP parser for the extension. See the Tiptap PHP package for more information on how to create a parser for a Tiptap extension or using an included one in their package.

Tool

Next you will need a make a tool for the extension.

Now you can register the tool and PHP parser with the plugin in a ServiceProvider's register method.

Converting output

With the Converter Utility class

With the helper function

`

Table of Contents

MergeTags Replacement

If you are using Merge tags and outputting the content as HTML you can use the mergeTagsMap method to replace the merge tags with the appropriate values.

Faker Utility

Testing

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Adam Weston
• All Contributors

License

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