vaadin textArea fraola 编辑器

Question

我尝试在 vaadin 中使用 fraola 编辑器。 Fraola 编辑器是一个 richText javascript 组件，可以轻松地从剪贴板复制图像。在 vaadin 中，我只是插入 vaaadin textArea Widget 并调用 javascript 函数 $("#richtext").fraolaEditor()... 在客户端，它运行良好，但在服务器端，textArea 保持为空。我试图通过 javascript 填充文本区域：在客户端上，文本区域已填充，但在服务器端保持空白.... 欢迎大家的帮助

代码： vl.addComponent(getRtarea());

    String fraola = "var liste = ''; " 
            + "         $(function() {"
            + "         $('#richText').froalaEditor({"
            + "         enter:$.FroalaEditor.ENTER_P," 
            + "         toolbarButtons:['insertFile','insertImage', 'fullscreen', '|', 'undo', 'redo' , '|', 'fontFamily', 'fontSize', 'color', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'insertTable', 'html'],"
            + "         fileUploadURL: 'uploadFile'," 
            + "         imageUploadURL: 'uploadFile',"
            + "         pastedImagesUploadURL: 'uploadFile',  " 
            + "         language: 'fr'"
            + "         }).on('froalaEditor.blur', function(){"
            + "             $('#richText').val($('.fr-element').text()).focus();"
            + "             alert($('#richText').val());"
            + "         })"
            + "         ;});";

    Page.getCurrent().getJavaScript().execute(fraola);

和 getRtarea() :

public TextArea getRtarea() {
if (_rtarea == null) {
    this._rtarea = new TextArea();
    _rtarea.setId("richText");
    _rtarea.setSizeFull();
}
return _rtarea;
}

Answer 1

您尝试使用的方法不是在 Vaadin 中集成 JavaScript 组件的首选方法。每次调用 execute(fraola) 时都会发送 String fraola，这会在经常执行时产生额外的开销。在您的情况下，您还需要状态对象。在此处查看有关创建 JavaScript 组件的更多信息：

https://vaadin.com/docs/v8/framework/articles/IntegratingAJavaScriptComponent.html

Answer 2

这里的问题很可能是 TextArea 小部件只监听用户发起的值更改事件，但如果它的值从 JavaScript 更改，它不会做出反应。

您可以改为使用一种可用的 RPC 机制将新值直接发送到服务器，而不是通过现有组件传递它。对于独立集成，您可以使用 https://vaadin.com/docs/v8/framework/articles/ExposingServerSideAPIToJavaScript.html. Alternatively, you can create a regular JavaScript component based on https://vaadin.com/docs/v8/framework/articles/IntegratingAJavaScriptComponent.html and https://vaadin.com/docs/v8/framework/articles/UsingRPCFromJavaScript.html.

中描述的机制

vaadin textArea fraola 编辑器

vaadin textArea fraola editor

javascript

clipboard

textarea

image

vaadin