Vaadin 和 Quill Editor:保存当前内容的问题

问题描述 投票:0回答:0

我在将 Quill Editor 集成到我的 Vaadin 应用程序时遇到问题。当我更改编辑器的内容并保存时,我没有得到编辑器的当前内容,而是以前的内容。我尝试使用 CompletableFuture 和 executeJs 获取内容,但它仍然无法按预期工作。当我尝试保存新内容时,调用了 setValue,但 futureContent.get() 返回 null。

这里是相关代码:

@JsModule("./js/quill.js")
public class QuillEditor extends AbstractSinglePropertyField<QuillEditor, String> {

  public QuillEditor() {
        super("value", "", false);
        getElement().executeJs("createQuillEditor($0)", getElement());

        getElement().addEventListener("text-change", event ->
                fireEvent(new ComponentValueChangeEvent<>(this, this, getEmptyValue(), false)));
    }

    @Override
    public String getValue() {
        CompletableFuture<String> futureContent = new CompletableFuture<>();

        ui.access(() -> {
            PendingJavaScriptResult pendingResult = getElement().executeJs("return getHtmlContent($0)", getElement());
            pendingResult.then(jsonValue -> futureContent.complete(jsonValue.asString()));
        });

        try {
            return futureContent.get();
        } catch (InterruptedException e) {
            e.printStackTrace();
        } catch (ExecutionException e) {
            throw new RuntimeException(e);
        }
        return null;
    }

    @Override
    public void setValue(String htmlContent) {
        getElement().executeJs("setQuillEditorHtmlContent($0, $1)", getElement(), htmlContent);
    }
}

quill.js

window.createQuillEditor = function (element) {
    const quill = new Quill(element, {
        theme: 'snow',
        modules: {
...... etc.

window.getHtmlContent = function (element) {
    const quill = Quill.find(element);
    console.log('Current content:', quill.root.innerHTML);
    return quill.root.innerHTML;
};

window.setQuillEditorHtmlContent = function (element, htmlContent) {
    const quill = Quill.find(element);
    quill.setContents(quill.clipboard.convert(htmlContent));
    console.log('HTML Content:', quill.root.innerHTML);
};
}

我添加了各种 console.log() 语句来检查编辑器的内容,JavaScript 代码似乎正确地检索了当前内容。但是,新内容没有正确传递给 Java 代码。

有没有人有集成 Quill Editor 和 Vaadin 的经验,或者知道我该如何解决这个问题?非常感谢任何帮助!

提前谢谢你!

在我的其他课程中,我实现了以下绑定:

binder.forField(quillEditor).bind(CustomTextblock::getContent, CustomTextblock::setContent);
javascript java vaadin quill
© www.soinside.com 2019 - 2024. All rights reserved.