Please see this code for working with Quilljs
:
window.InitialQuill = {
createQuill: function (quillElement) {
var options = {
debug: 'info',
modules: {
toolbar: '#toolbar'
},
placeholder: 'write something...',
readonly: false,
theme: 'snow'
};
new Quill(quillElement, options);
},
getQuillContent: function (quillControl) {
return JSON.stringify(quillControl.__quill.getContents());
},
getQuillText: function (quillControl) {
return quillControl.__quill.getText();
},
getQuillHTML: function (quillControl) {
return quillControl.__quill.root.innerHTML;
},
loadQuillContent: function (quillControl, quillContent) {
//return quillControl.__quill.setContents(JSON.parse(quillContent), 'api');
var ops = [
{ insert: 'Hello ' },
{ insert: 'World!', attributes: { bold: true } },
{ insert: 'n' }
];
return quillControl.__quill.setContents(ops,'api')
}
}
I’m using above code in blazor this way:
@inject IJSRuntime JsRuntime
@if(EditorEnabled)
{
<br>
<button class="btn btn-primary" @onclick="GetText">Get Text</button>
<button class="btn btn-primary" @onclick="GetHTML">Get HTML</button>
<button class="btn btn-primary" @onclick="GetEditorContent">Get Content</button>
<br />
<div>
@EditorContent
</div>
<div>
@((MarkupString)@EditorHTMLContent)
</div>
<br />
<button class="btn btn-danger" @onclick="SaveContent">Save Content</button>
<button class="btn btn-success" @onclick="LoadContent">Load Content</button>
<br />
<br />
<br />
<div id="toolbar">
<span class="ql-formats">
<select class="ql-font">
<option selected=""></option>
<option value="serif"></option>
<option value="tahoma"></option>
</select>
<select class="ql-size">
<option value="small"></option>
<option selected=""></option>
<option value="large"></option>
<option value="huge"></option>
</select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-undeline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
<select class="ql-align">
<option selected=""></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
</span>
</div>
}
<div @ref="@DivEditorElement"></div>
@code {
private string strSavedContent = "";
private ElementReference DivEditorElement;
private string EditorContent;
private string EditorHTMLContent;
private bool EditorEnabled = true;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender == true)
{
await JsRuntime.InvokeAsync<string>("InitialQuill.createQuill", DivEditorElement);
}
}
private async Task GetText()
{
EditorHTMLContent = "";
EditorContent = await JsRuntime.InvokeAsync<string>("InitialQuill.getQuillText", DivEditorElement);
}
private async Task GetHTML()
{
EditorContent = "";
EditorHTMLContent = await JsRuntime.InvokeAsync<string>("InitialQuill.getQuillHTML", DivEditorElement);
}
private async Task GetEditorContent()
{
EditorHTMLContent = "";
EditorContent = await JsRuntime.InvokeAsync<string>("InitialQuill.getQuillContent", DivEditorElement);
}
private async Task SaveContent()
{
strSavedContent = await JsRuntime.InvokeAsync<string>("InitialQuill.getQuillContent", DivEditorElement);
}
private async Task LoadContent()
{
var QuillDelta = await JsRuntime.InvokeAsync<string>("InitialQuill.loadQuillContent", DivEditorElement, strSavedContent);
}
}
All buttons work fine except Load Content
. It works and specific text shows in the editor but after then it cause a problem.
Unhandled exception rendering component: An exception occurred executing JS interop: The JSON value could not be converted to System.String. Path: $ | LineNumber: 0 | BytePositionInLine: 1.. See InnerException for more details.
Microsoft.JSInterop.JSException: An exception occurred executing JS interop: The JSON value could not be converted to System.String. Path: $ | LineNumber: 0 | BytePositionInLine: 1.. See InnerException for more details.
I wrote the code this way:
quillControl.__quill.setContents(JSON.parse(quillContent), 'api');
but I got same error.
Where is my problem? Thanks