There are several ready made projects available, also couple of NuGet packages to download. I have found good option in NuGet library. However it is missing some customization in JavaScript interop. How I can take sources from NuGet package to use them independently in my project or as an option how to get it working without any NuGet?
So I have created
QuillEditor.razor:
@inherits InputTextArea
@inject IJSRuntime JSRuntime
<textarea value="@CurrentValue"></textarea>
QuillEditor.razor.cs:
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System;
using System.Threading.Tasks;
namespace Client.Shared.Components
{
public partial class QuillEditor
{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await this.JSRuntime.InvokeVoidAsync("QuillInterop.init", DotNetObjectReference.Create(this));
await base.OnAfterRenderAsync(firstRender);
}
[JSInvokable]
public Task EditorDataChanged(string data)
{
this.CurrentValue = data;
StateHasChanged();
return Task.CompletedTask;
}
}
}
quill.js:
window.blazor = {};
window.blazor.quill = {
initialize: function (id, value, dotnet) {
var dataOptions = JSON.parse(document.getElementById(id).getAttribute("data-options"));
var defaultOptions = {
modules: {
toolbar: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
["bold", "italic", "underline", "strike"],
[{ 'list': "ordered" }, { 'list': "bullet" }, { 'indent': "-1" }, { 'indent': "+1" }],
["link", "image", "blockquote"]
]
},
theme: "snow"
};
var options = Object.assign({}, defaultOptions, dataOptions);
var quill = new Quill(`#${id}`, options);
quill.on("text-change", function (delta) {
dotnet.invokeMethodAsync("quill-onchange", quill.container.firstChild.innerHTML);
});
quill.container.firstChild.innerHTML = value;
}
};
Above code is not working as I am not sure how to tie all together.
Basically I would like to understand how this has been done, but as original GitHub project seems to be deleted, I don’t understand how it has been done? Can somebody drop some light?
https://www.nuget.org/packages/BlazorQuill/