You can install the package via composer:
composer require awcodes/richer-editorImportant
If you have not set up a custom theme and are using Filament Panels follow the instructions in the Filament Docs first.
After setting up a custom theme add the plugin's css and views to your theme.css file or your app.css file if using the standalone packages.
@import '../../../../vendor/awcodes/richer-editor/resources/css/index.css';
@source '../../../../vendor/awcodes/richer-editor/resources/views/**/*.blade.php';Warning
The following plugins are experimental and should not be used at the moment. See their docblocks for more information.
- CodeBlockLowlightPlugin
- CodeBlockShikiPlugin
- FigurePlugin
- VideoPlugin
use Awcodes\RicherEditor\Plugins\DebugPlugin;
use Awcodes\RicherEditor\Plugins\EmbedPlugin;
use Awcodes\RicherEditor\Plugins\EmojiPlugin;
use Awcodes\RicherEditor\Plugins\FullScreenPlugin;
use Awcodes\RicherEditor\Plugins\IdPlugin;
use Awcodes\RicherEditor\Plugins\LinkPlugin;
use Awcodes\RicherEditor\Plugins\SourceCodePlugin;
RichEditor::make('content')
->plugins([
DebugPlugin::make(), // only works in local environment
EmbedPlugin::make(),
EmojiPlugin::make(), // Doesn't have a toolbar button
FullScreenPlugin::make(),
IdPlugin::make(), // Doesn't have a toolbar button
LinkPlugin::make(), // Requires IdPlugin
SourceCodePlugin::make(),
])
->toolbarButtons([
['embed', 'sourceCode', 'fullscreen', 'debug'],
])use Filament\Forms\Components\RichEditor\RichEditorTool;
RichEditor::make('content')
->maxHeight('400px')use Awcodes\RicherEditor\Tools\ToolGroup;
use Filament\Forms\Components\RichEditor\RichEditorTool;
RichEditor::make('content')
->tools([
ToolGroup::make('headingTools')
->label('Headings')
->icon(Heroicon::H1)
->displayAsLabel()
->items([
'h1',
'h2',
'h3',
RichEditorTool::make('h4')...
]),
])
->toolbarButtons([
['headingTools'],
])- Heading Four Tool
- Heading Five Tool
- Heading Six Tool
use Awcodes\RicherEditor\Tools\HeadingFourTool;
use Awcodes\RicherEditor\Tools\HeadingFiveTool;
use Awcodes\RicherEditor\Tools\HeadingSixTool;
RichEditor::make('content')
->tools([
HeadingFourTool::make(),
HeadingFiveTool::make(),
HeadingSixTool::make(),
])
->toolbarButtons([
['h4', 'h5', 'h6'],
])use Awcodes\RicherEditor\Blocks\HighlightedCodeBlock;
RichEditor::make('content')
->blocks([
HighlightedCodeBlock::class,
])
// when rendering the content you can change the theme using any of Phiki's supported themes. See https://phiki.dev/multi-themes
use Awcodes\RicherEditor\Blocks\HighlightedCodeBlock;
use Phiki\Theme\Theme;
RichContentRenderer::make($content)
->customBlocks([
HighlightedCodeBlock::class => [
'light' => Theme::GithubLight,
'dark' => Theme::GithubDark,
],
])
->toHtml()use Filament\Forms\Components\RichEditor\RichContentRenderer;
RichContentRenderer::make($content)
->linkHeadings(level: 3, wrap: false)
->toHtml()This feature uses HTML To Markdown for PHP by thephpleague. Please see their documentation for available options.
use Filament\Forms\Components\RichEditor\RichContentRenderer;
RichContentRenderer::make($content)
->toMarkdown(options: [])use Awcodes\RicherEditor\Support\TableOfContents;
TableOfContents::make($content)
->asHtml();
/** or as an array to handle the output yourself */
$toc = TableOfContents::make($content)
->asArray();use Awcodes\RicherEditor\Support\RichContentFaker;
$richContent = RichContentFaker::make()
->heading(level: 2)
->paragraphs(count: 1, withRandomLinks: false)
->link()
->lead(pargraphs: 1)
->small()
->unorderedList(count: 1)
->orderedList(count: 1)
->image(source: null, width: 1280, height: 720)
->details(open: false)
->code(className: 'language-php')
->codeBlock(language: 'sh', prefix: 'language-')
->blockquote()
->hr()
->br()
->table(cols: null)
->grid(cols: [1,1,1], breakpoint: 'md')
->emptyParagraph()
// rendering (only use one)
->asHtml()
->asJson()
->asText();composer testPlease see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.