![]() ![]() Here we can set the initial content of the editor using the value property. You can easily implement a Rich Text Editor in your Blazor applications using the free open source component called Quill. Once the installation is complete, open the App.js file, import the ReactQuill component, and include it into the App, as shown below: javascript import. ![]() To do that, run the following command in your terminal: npm i react-quill. But Quill has a built-in event that we can listen for, but we need to add the listener in the mounted method as well.Īs a final touch, it’s a nice place to add any default that value comes from the v-model. First, install the react-quill package, which is a React wrapper around Quill. Note: This branch and README covers the upcoming 2.0. For now, we can keep it very simple, but you can extend and modify it as you need.Īlso, it’s good to know Quill is using the contenteditable attribute, which means we can’t use the usual input or change events in the usual way. Quill is a modern WYSIWYG editor built for compatibility and extensibility. For initializing Quill, we need to pass the configuration to the constructor. The best place to initialize a new Quill instance (at least for us in this case) is Vue’s mounted method. Don’t forget to pull in the CSS as well! Initializing Quill and Defining Events First of all we need to instantiate a new Quill object and pass the id of the div where we want the editor to be as a parameter.
0 Comments
Leave a Reply. |