Question

我尝试在vaadin中使用fraola编辑器。 Fraola编辑器是一个richText javascript组件，可以轻松地从剪贴板复制图像。在vaadin我只需插入vaaadin textArea Widget并调用javascript函数$（＆＃34;＃richtext＆＃34;）。fraolaEditor（）... 在客户端它完美地工作但在服务器端，textArea保持空白。我试图通过javascript填充textArea：在客户端上textAreain已经填写但在服务器端保持空白.... 欢迎各方面的帮助

代码： 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中描述的机制。或者，您可以根据https://vaadin.com/docs/v8/framework/articles/IntegratingAJavaScriptComponent.html和https://vaadin.com/docs/v8/framework/articles/UsingRPCFromJavaScript.html创建常规JavaScript组件。

vaadin textArea fraola editor

2 个答案: