请参阅此代码以了解如何使用 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);
}
}
除了加载内容
之外,所有按钮都可以正常工作。它有效并且特定文本显示在编辑器中,但之后它会导致问题。
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.
我这样写代码:
quillControl.__quill.setContents(JSON.parse(quillContent), 'api');
但我遇到了同样的错误。我的问题出在哪里?
最佳答案
如果您要将字符串转换为 JSON,请确保某些字符为 escaped ,否则转换将无法按预期进行。
关于javascript - 为 Quill 调用 setContents 可以工作,但随后会导致错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70639712/