Rich Text Editor component for Vaadin 10 (Java)

Flow
1

Hello. I just released https://vaadin.com/directory/component/wysiwyg-e-rich-text-editor-component-for-java

This thread is for feedback and questions regarding the component.
The integration code can be found from [github]
(https://github.com/pleku/wysiwyg-e-java/blob/master/src/main/java/org/vaadin/pekka/WysiwygE.java).

2

Thanks for creating this editor.

Couple of requests:

Is it possible to use this editor without the editor buttons? I understand this is little bit weird, but the information received through through RTE has to be displayed through RTE only since it has lot of formatting information. So it will be more clean to display it without the RTE header. Thoughts?

Also is there any way to include Superscript and subscript in RTE ?

3

Hello Kiran.

Thanks for the feedback. I’ve added support for configuring the shown tools for the server side API in the 1.0.0.beta1 release. At the moment, it doesn’t however seem possible to totally remove the toolbar.

If you want to show user created editor content as HTML, you can also do that with using eg. the Html component. Just be sure to sanitize it.

For super- & subscript support, the web component doesn’t have any tool for those. It should be first added there, and then it can be included to the Java integration.

4

Hello Pekka, great addon thanks.

But we did not manage to disable some tools take a look to our example, and help us please:


@Tag("description-form")
@HtmlImport("src/views/description-form.html")
public class DescriptionForm extends PolymerTemplate<TemplateModel> {

    @Id("description")
    private WysiwygE description;

    public DescriptionForm(BeanValidationBinder<Entity> binder, Entity entity) {
        setBinder(binder);
        binder.readBean(entity);
    }

    public void setBinder(BeanValidationBinder<Entity> binder) {
        binder.bind(description, "description");
		// It works perfectly
        description.setPlaceholder("Inserta una descripción aquí ...");
        // This does not work for us
        description.setToolsInvisible(WysiwygE.Tool.AUDIO, WysiwygE.Tool.CODE, WysiwygE.Tool.VIDEO);
		// It works perfectly
        description.setRedoAllowed(false);
    }
	...

And in our html:

<dom-module id="description-form">
    <template>
        <div>
            <vaadin-split-layout id="formLayout" theme="small">
                <div class="left-column">
                    <wysiwyg-e id="description"></wysiwyg-e>
                </div>
                <div class="right-column">
                </div>
            </vaadin-split-layout>
        </div>
    </template>

    <script>
        class DescriptionForm extends LocalizationMixin {
            static get is() {
                return 'description-form';
            }
        }
        window.customElements.define(DescriptionForm.is, DescriptionForm);
    </script>
</dom-module>

Thanks

5

Hi Pekka,

thanks for your work.

I have one question/problem: Is this addon also supposed to work on iOS (iPhone)?
All controls are in a disabled state, only the undo/redo button is available.
I have no problems on other platforms/browsers, also on android it works, but not on iOS.

Best Regards
Ralph Menon