MarkdownX has a few (optional) parameters you can pass to the component which include:
contentinside the textarea
nameattribute for the
keyfor the editor (allows for multiple editors on the same page)
Here is an example of how you would pass a parameters to the editor:
@livewire('markdown-x', ['content' => '', 'name' => 'body', 'key' => 'post-key'])
Or, you can use the following syntax:
<livewire:markdown-x :key="$postKey" name="body" />
Remember that prepending the
:to the attribute will render the contents inside as code, otherwise you can just pass the attribute as a string without the colon.
Here's an example of how you would pass styles to your editor:
<livewire:markdown-x :style="[ 'toolbar' => 'flex items-center justify-between bg-gray-300', 'textarea' => 'w-full h-full border-2 border-gray-200 focus:border-gray-200 focus:outline-none p-4', 'height' => 'h-64', 'preview' => 'bg-gray-200 p-10', 'help' => 'bg-gray-300 p-8 prose max-w-none' ]"/>
Now you can customize the editors appearance 🎨.
Reminder - All the params are optional
Next, let's talk about some of the dropdown items available in the editor.
Want to download MarkdownX and use it in your project and support ongoing development? If so, you will want to upgrade to a Pro account 🌟.
Click here 👇 to learn more.Upgrade to Pro
Take these 2 steps to try out the demo
We'll never message you. This is just to prevent spam. Damn Spammers! Ruin it for everyone 😆.Verify Here
Now you can click create->post and try out the editor
Warning: If you are testing the editor, do not publish an incomplete post. It will be deleted.