Skip to content

Instantly share code, notes, and snippets.

@dhruva81
Forked from ju5t/instructions.md
Created February 17, 2021 11:41
Show Gist options
  • Save dhruva81/a7ebab04d683526686e143aacdb6f42c to your computer and use it in GitHub Desktop.
Save dhruva81/a7ebab04d683526686e143aacdb6f42c to your computer and use it in GitHub Desktop.
Livewire enabled TinyMCE blade component

Instructions

This is a very basic TinyMCE component. It uses 'entangle'. This allows you to link a Livewire and Alpine property to eachother. If one value changes, the other does too.

Installation

Add tinymce.blade.php to views/components/input. This can be another component folder too if you prefer, but keep in mind that you should also change the x-input.tinymce structure accordingly.

Usage

Make sure you have added the TinyMCE library in the layout that you're extending. Although with some extra work the component should be able to do this for you, it doesn't right now.

After the TinyMCE library has been added, this is how you use it:

<x-input.tinymce wire:model="editor" placeholder="Type anything you want..." />

Note that all HTML attributes will propogate to the text area. In this case the placeholder will automatically be passed on to the input in the blade component.

In the example we link it to editor. This can be any wired property in the Livewire component.

<div
x-data="{ value: @entangle($attributes->wire('model')) }"
x-init="
tinymce.init({
target: $refs.tinymce,
themes: 'modern',
height: 200,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
setup: function(editor) {
editor.on('blur', function(e) {
value = editor.getContent()
})
editor.on('init', function (e) {
editor.setContent(value)
})
}
})
"
wire:ignore
>
<div>
<input
x-ref="tinymce"
type="textarea"
{{ $attributes->whereDoesntStartWith('wire:model') }}
>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment