1. Go to this page and download the library: Download awcodes/richer-editor library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
awcodes / richer-editor example snippets
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;
use Awcodes\RicherEditor\Plugins\FakerPlugin;
use Awcodes\RicherEditor\Plugins\CodeBlockShikiPlugin;
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(),
FakerPlugin::make(), // only works in local environment
CodeBlockShikiPlugin::make(),
])
->toolbarButtons([
['embed', 'sourceCode', 'fullscreen', 'debug', 'fakeHeading', 'fakeParagraphs', 'fakeBulletList', 'fakeNumberedList', 'codeBlock'],
])
use Filament\Forms\Components\RichEditor\RichEditorTool;
RichEditor::make('content')
->maxHeight('400px')
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 Awcodes\RicherEditor\Plugins\CodeBlockShikiPlugin;
use Phiki\Theme\Theme;
RichEditor::make('content')
->plugins([
CodeBlockShikiPlugin::make()
->defaultTheme(Theme::TokyoNight)
->themes(light: Theme::GithubLight, dark: Theme::GithubDark),
])
// strings work too
CodeBlockShikiPlugin::make()
->defaultTheme('tokyo-night')
->themes(light: 'github-light', dark: 'github-dark')
use Awcodes\RicherEditor\Plugins\CodeBlockShikiPlugin;
use Filament\Forms\Components\RichEditor\RichContentRenderer;
use Phiki\Theme\Theme;
RichContentRenderer::make($content)
->plugins([
CodeBlockShikiPlugin::make()
->themes(light: Theme::GithubLight, dark: Theme::GithubDark),
])
->toHtml()
use Filament\Forms\Components\RichEditor\RichContentRenderer;
RichContentRenderer::make($content)
->linkHeadings(level: 3, wrap: false)
->toHtml()
use Filament\Forms\Components\RichEditor\RichContentRenderer;
RichContentRenderer::make($content)
->toMarkdown(options: [])
use Awcodes\RicherEditor\Support\RichContentRenderer;
use Awcodes\RicherEditor\Plugins\PhikiCodeBlockPlugin;
RichContentRenderer::make($content)
->plugins([
PhikiCodeBlockPlugin::make(),
])
->phikiCodeBlocks()
->toHtml();
use Awcodes\RicherEditor\Support\TableOfContents;
TableOfContents::make($content)
->asHtml();
/** or as an array to handle the output yourself */
$toc = TableOfContents::make($content)
->asArray();