![]() ![]() Place to define custom JavaScript event listeners for Quill Hook into the text-change event fired by Quill Set JavaScript configuration options and toolbar handlers If a validation error is present for the input, it will show the error state on the input If you want to prevent our component from updating the value, or dispatching an input event, you may return false from the slot: return false Let value = instance._ console.log(value) If you need access to the quillĮditor instance, you can do so via instance._quill. That has access to an instance variable, which provides you access to the Alpine data object for the quill component. Since our component's JavaScriptĪlready listens for that event, we've provided a slot that can be used to perform additional actions if needed. ![]() Whenever the text content of the quill editor is changed, Quill will fire a text-change event that can be listened for. ![]() If you need to hook into the text-change event fired by Quill, you should use the onTextChange slot instead. The quill component integrates easily with livewire out-of-the-box and just requires you to provide a wire:model to the component. If a name attribute is provided, we will render a hidden input for regularįorm submissions, which will keep its value in sync with the value of the quill editor. This will create a new quill editor inside of a content editable div. The most basic usage of the quill component involves just adding a self-closing tag: See Third-Party Assets on the installation guide for further setup information. You are of course free to use the cdn links alternatively if that's more your style: īe sure to replace 1.0.0 with the version you are planning on using. You will also need to import the theme styles you are using into your stylesheets: "quill/dist/snow.css" You can then import it in your project using imports: import Quill from "quill" You may install Quill via npm: npm i quill -save The quill component requires the following third-party libraries to work properly: Before using this component, we recommend familiarizing yourself with the Quill library. The quill component provides a rich text editor. ![]()
0 Comments
Leave a Reply. |