调用Quill的setContents可以工作，但随后会导致错误

Question

请参阅此代码以使用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');
},
};

我在blazor中以这种方式使用上面的代码：

@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);
}
}

除Load Content外，所有按钮都能正常工作。它可以工作，特定的文本会显示在编辑器中，但之后会引起问题。

未处理的异常呈现组件：执行JS互操作时发生异常：JSON值无法转换为System.String。路径：$|LineNumber:0|BytePositionInLine:1。有关详细信息，请参阅InnerException。Microsoft.JSInterop.JSException：执行JS互操作时发生异常：JSON值无法转换为System.String。路径：$|LineNumber:0|BytePositionInLine:1。有关详细信息，请参阅InnerException。

我是这样写代码的：

quillControl.__quill.setContents(JSON.parse(quillContent), 'api');

但我也犯了同样的错误。我的问题在哪里？

Answer 1

如果要将字符串转换为JSON，请确保对某些字符进行了转义，否则转换将无法按预期进行。

Answer 2

您已经将期望的返回类型设置为字符串，并且正在传递一个完整的JSON对象(delta(，这就是您收到错误的原因。以下是您的选择：

如果要返回对象，可以将类型更改为对象

private async Task LoadContent()
{
var QuillDelta = await JsRuntime.InvokeAsync<Object>("InitialQuill.loadQuillContent", DivEditorElement, strSavedContent);
}

如果要从客户端返回字符串，则需要调整返回值以使其也字符串化

loadQuillContent: function (quillControl, quillContent) {
// return quillControl.__quill.setContents(JSON.parse(quillContent), 'api');
var ops = [
{ insert: 'Hello ' },
{ insert: 'World!', attributes: { bold: true } },
{ insert: 'n' },
];
return JSON.stringify(quillControl.__quill.setContents(ops, 'api'));
}

如果您想返回对象并在服务器端对其进行字符串化，您可以执行以下操作

private async Task LoadContent()
{
var QuillDelta = await JsRuntime.InvokeAsync<Object>("InitialQuill.loadQuillContent", DivEditorElement, strSavedContent);
//this is using the Json namespace '@using System.Text.Json'
var stringFromObject= JsonSerializer.Serialize(QuillDelta);
}