PHP code example of codeldev / livewire-markdown-editor
1. Go to this page and download the library: Download codeldev/livewire-markdown-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/ */
codeldev / livewire-markdown-editor example snippets
return [
/**
* --------------------------------------------------------------------------
* Image Upload Configuration
* --------------------------------------------------------------------------
* Settings for handling image uploads including storage location, file size
* limits, and supported file types for the markdown editor.
*/
'image' => [
/**
* --------------------------------------------------------------------------
* Storage Disk
* --------------------------------------------------------------------------
* This value is the disk name set in your filesystems config file where
* uploaded images will be stored. If no disk is provided the default
* will be used. If a disk name is set that does not exist, then an
* exception will be thrown
*/
'disk' => env(key: 'MD_EDITOR_STORAGE_DISK', default: 'public'),
/**
* --------------------------------------------------------------------------
* Store File As
* --------------------------------------------------------------------------
* This value represents the path within the configured disk where images
* will be stored. You may use any of the available attributes passed
* to the path string. attributes available are:
*
* [date] - Current date in Y-m-d format.
* [id] - A randomly generated uuid string
* [file] - The file name with the extension * --------------------------------------------------------------------------
* This value specifies the action class responsible for processing image
* uploads. The default action handles base64 decoding, validation, file
* storage, and path generation. You can create a custom action class to
* implement your own upload logic, such as cloud storage integration,
* image optimization, or custom validation rules.
*
* Custom action classes must:
* - extend: Codeldev\LivewireMarkdownEditor\Abstracts\UploadImageAbstract
* - implement: Codeldev\LivewireMarkdownEditor\Contracts\UploadImageInterface
*
* The handle() method receives the image data, filename, and MIME type, and must
* return an array with success status, message, and file path.
*
* Example custom action:
* 'action' => App\Actions\CustomImageUploadAction::class,
*/
'action' => Codeldev\LivewireMarkdownEditor\Actions\UploadImageAction::class,
/**
* --------------------------------------------------------------------------
* Preview HTML Action Class
* --------------------------------------------------------------------------
* This value specifies the action class responsible for converting markdown
* content to HTML for the preview pane. The default action provides basic
* markdown parsing with security features like HTML sanitization. You can
* create a custom action class to implement advanced markdown features,
* custom syntax highlighting, or specialized rendering logic.
*
* Custom action classes must implement:
* - Codeldev\LivewireMarkdownEditor\Contracts\PreviewHtmlInterface
*
* The handle() method receives the raw markdown string and must return
* the rendered HTML string for display in the preview pane.
*
* Example custom action:
* 'preview' => App\Actions\CustomPreviewAction::class,
*/
'preview' => Codeldev\LivewireMarkdownEditor\Actions\PreviewHtmlAction::class,
],
/**
* --------------------------------------------------------------------------
* CommonMark Configuration
* --------------------------------------------------------------------------
* These settings extend the base spatie/laravel-markdown configuration by
* adding custom extensions and options specific to the markdown editor.
* Values defined here will be merged with existing markdown config
* without overriding your customizations.
*/
'commonmark' => [
/**
* --------------------------------------------------------------------------
* Custom Extensions
* --------------------------------------------------------------------------
* Additional CommonMark extensions to enhance markdown rendering capabilities.
* These extensions are automatically merged with any existing extensions
* from spatie/laravel-markdown configuration. Each extension adds
* specific functionality to the Markdown parser:
*
* - ImageExtension: Enhanced image handling with size attributes and captions
* - YouTubeExtension: Converts YouTube URLs to embedded video players
* - ExternalLinkExtension: Automatically handles external links with security
*
* To add custom extensions, ensure they implement:
* League\CommonMark\Extension\ExtensionInterface
*
* Note: Extension classes must be available in the application's autoloader.
* Package-specific extensions are automatically available, but custom
* extensions should be placed in your app's namespace.
*/
'extensions' => [
Codeldev\LivewireMarkdownEditor\Support\Commonmark\Extensions\YouTubeExtension::class,
League\CommonMark\Extension\ExternalLink\ExternalLinkExtension::class,
],
/**
* --------------------------------------------------------------------------
* CommonMark Options
* --------------------------------------------------------------------------
* Configuration options passed to the CommonMark parser. These options are
* merged recursively with the existing commonmark_options from the base
* markdown configuration, allowing fine-grained control over parsing
* behavior without losing existing customizations.
*
* For a complete list of available options, refer to:
* https://commonmark.thephpleague.com/2.4/configuration/
*/
'options' => [
/**
* Controls how external links are handled in the markdown preview. Links
* matching 'internal_hosts' are treated as internal navigation, while
* external links automatically open in new windows/tabs for better
* user experience and site retention.
*
* Docs: https://commonmark.thephpleague.com/2.7/extensions/external-links/
*/
'external_link' => [
'internal_hosts' => env('APP_URL'),
'open_in_new_window' => true,
],
/**
* Defines table rendering behavior in the preview. The 'wrap' setting
* controls whether tables are wrapped in container elements, while
* 'alignment_attributes' maps Markdown table alignment syntax
* (left, center, right) to their corresponding HTML
* attributes for proper visual formatting.
*
* Docs: https://commonmark.thephpleague.com/2.7/extensions/tables/
*/
'table' => [
'wrap' => [
'enabled' => false,
'tag' => 'div',
'attributes' => [],
],
'alignment_attributes' => [
'left' => ['align' => 'left'],
'center' => ['align' => 'center'],
'right' => ['align' => 'right'],
],
],
],
],
/**
* --------------------------------------------------------------------------
* Editor Configuration
* --------------------------------------------------------------------------
* General settings for the markdown editor behavior, timing, and available
* commands. These options control user interaction and interface elements.
*/
'editor' => [
/**
* --------------------------------------------------------------------------
* Event Dispatcher Name
* --------------------------------------------------------------------------
* The default name of the event that will be dispatched when markdown content
* is updated. This allows other components to listen for changes and react
* accordingly to editor modifications. Different event names can be set
* during component initialization
*/
'dispatcher' => env(key: 'MD_EDITOR_DISPATCHER', default: 'markdown-editor'),
/**
* --------------------------------------------------------------------------
* Content Update Debounce
* --------------------------------------------------------------------------
* The delay in milliseconds before sending content updates to the server
* after the user stops typing. This prevents excessive server requests
* during active editing while ensuring changes are saved promptly.
*/
'debounce' => (int) env(key: 'MD_EDITOR_DEBOUNCE_MS', default: 1000),
/**
* --------------------------------------------------------------------------
* Error Message Timing
* --------------------------------------------------------------------------
* Controls how long error messages are displayed to users and the fade
* transition duration when they disappear. Display time
#[On('markdown-content')]
public function setContent(string $content): void
{
$this->page_content = $content;
}
class CreatePost extends Component
{
public string $title = '';
public string $content = '';
#[On('markdown-content')]
public function setContent(string $content): void
{
$this->content = $content;
}
public function save(): void
{
$validated = $this->validate();
Post::create($validated);
}
}