Examples with RichTextEditor com.vaadin.flow.component.richtexteditor.RichTextEditor used on opensource projects

Example 6 with RichTextEditor

use of com.vaadin.flow.component.richtexteditor.RichTextEditor in project komunumo-server by komunumo.

the class FaqDialog method createForm.

@Override
public void createForm(@NotNull final FormLayout formLayout, @NotNull final Binder<FaqRecord> binder) {
    final var question = new TextField("Question");
    question.setRequiredIndicatorVisible(true);
    question.setValueChangeMode(EAGER);
    final var answer = new RichTextEditor();
    answer.setRequiredIndicatorVisible(true);
    formLayout.add(question, new CustomLabel("Answer"), answer);
    binder.forField(question).withValidator(new StringLengthValidator("Please enter the question (max. 255 chars)", 1, 255)).bind(FaqRecord::getQuestion, FaqRecord::setQuestion);
    binder.forField(answer.asHtml()).withValidator(new StringLengthValidator("Please enter the question (max. 255 chars)", 1, 10_000)).bind(FaqRecord::getAnswer, FaqRecord::setAnswer);
}

Example 7 with RichTextEditor

use of com.vaadin.flow.component.richtexteditor.RichTextEditor in project komunumo-server by komunumo.

the class SponsorDialog method createForm.

@Override
public void createForm(@NotNull final FormLayout formLayout, @NotNull final Binder<SponsorRecord> binder) {
    final var name = new TextField("Name");
    final var website = new TextField("Website");
    final var level = new ComboBox<SponsorLevel>("Level");
    final var logo = new ImageUploadField("Logo");
    final var description = new RichTextEditor();
    final var validFrom = new DatePicker("Valid from");
    final var validTo = new DatePicker("Valid to");
    final var domains = new TagField("Domains");
    name.setRequiredIndicatorVisible(true);
    name.setValueChangeMode(EAGER);
    website.setValueChangeMode(EAGER);
    level.setItems(SponsorLevel.values());
    formLayout.add(name, website, level, logo, new CustomLabel("Description"), description, validFrom, validTo, domains);
    binder.forField(name).withValidator(new StringLengthValidator("Please enter the name of the sponsor (max. 255 chars)", 1, 255)).bind(SponsorRecord::getName, SponsorRecord::setName);
    binder.forField(website).withValidator(value -> value.isEmpty() || value.startsWith("https://"), "The website address must start with \"https://\"").withValidator(new StringLengthValidator("The website address is too long (max. 255 chars)", 0, 255)).bind(SponsorRecord::getWebsite, SponsorRecord::setWebsite);
    binder.forField(level).bind(SponsorRecord::getLevel, SponsorRecord::setLevel);
    binder.forField(logo).withValidator(value -> value.isEmpty() || value.startsWith("data:") || value.startsWith("https://"), "The logo must be uploaded or the logo address must be secure (HTTPS)").withValidator(new StringLengthValidator("The logo is too big (max. 100 KB)", 0, 100_000)).bind(SponsorRecord::getLogo, SponsorRecord::setLogo);
    binder.forField(description.asHtml()).withValidator(new StringLengthValidator("The description is too long (max. 100'000 chars)", 0, 100_000)).bind(SponsorRecord::getDescription, SponsorRecord::setDescription);
    binder.forField(validFrom).withValidator(value -> value == null || validTo.isEmpty() || value.isBefore(validTo.getValue()), "The valid from date must be before the valid to date").bind(SponsorRecord::getValidFrom, SponsorRecord::setValidFrom);
    binder.forField(validTo).withValidator(value -> value == null || validFrom.isEmpty() || value.isAfter(validFrom.getValue()), "The valid to date must be after the valid from date").bind(SponsorRecord::getValidTo, SponsorRecord::setValidTo);
    binder.forField(domains).bind(this::getDomains, this::setDomains);
}

Example 8 with RichTextEditor

use of com.vaadin.flow.component.richtexteditor.RichTextEditor in project komunumo-server by komunumo.

the class NewsDialog method createForm.

@Override
public void createForm(@NotNull final FormLayout formLayout, @NotNull final Binder<NewsRecord> binder) {
    final var title = new TextField("Title");
    final var subtitle = new TextField("Subtitle");
    final var teaser = new RichTextEditor();
    final var message = new RichTextEditor();
    final var showFrom = new DateTimePicker("Show from");
    final var showTo = new DateTimePicker("Show to");
    title.setRequiredIndicatorVisible(true);
    title.setValueChangeMode(EAGER);
    subtitle.setValueChangeMode(EAGER);
    formLayout.add(title, subtitle, new CustomLabel("Teaser"), teaser, new CustomLabel("Message"), message, showFrom, showTo);
    binder.forField(title).withValidator(new StringLengthValidator("Please enter the title of the news (max. 255 chars)", 1, 255)).bind(NewsRecord::getTitle, NewsRecord::setTitle);
    binder.forField(subtitle).withValidator(new StringLengthValidator("The subtitle is too long (max. 255 chars)", 0, 255)).bind(NewsRecord::getSubtitle, NewsRecord::setSubtitle);
    binder.forField(teaser.asHtml()).withValidator(new StringLengthValidator("The teaser is too long (max. 1'000 chars)", 0, 1_000)).bind(NewsRecord::getTeaser, NewsRecord::setTeaser);
    binder.forField(message.asHtml()).withValidator(new StringLengthValidator("The message is too long (max. 100'000 chars)", 0, 100_000)).bind(NewsRecord::getMessage, NewsRecord::setMessage);
    binder.forField(showFrom).withValidator(value -> value == null || showTo.isEmpty() || value.isBefore(showTo.getValue()), "The show from date must be before the show to date").bind(NewsRecord::getShowFrom, NewsRecord::setShowFrom);
    binder.forField(showTo).withValidator(value -> value == null || showFrom.isEmpty() || value.isAfter(showFrom.getValue()), "The show to date must be after the show from date").bind(NewsRecord::getShowTo, NewsRecord::setShowTo);
}

Example 9 with RichTextEditor

use of com.vaadin.flow.component.richtexteditor.RichTextEditor in project flow-components by vaadin.

the class MainView method createRichTextEditorInATemplate.

private void createRichTextEditorInATemplate() {
    RichTextEditorInATemplate richTextEditorInATemplate = new RichTextEditorInATemplate();
    richTextEditorInATemplate.setId("template");
    RichTextEditor rteTemplate = richTextEditorInATemplate.getRichTextEditor();
    Div valuePanel = new Div();
    valuePanel.setId("template-value-panel");
    Button getValueButton = new Button("Get value");
    getValueButton.setId("get-template-rte-value");
    getValueButton.addClickListener(event -> {
        String value = rteTemplate.getValue();
        valuePanel.setText(value);
    });
    add(richTextEditorInATemplate, valuePanel, getValueButton);
}

Example 10 with RichTextEditor

use of com.vaadin.flow.component.richtexteditor.RichTextEditor in project flow-components by vaadin.

the class MainView method createRichTextEditorWithHtmlBinder.

private void createRichTextEditorWithHtmlBinder() {
    RichTextEditor rte = new RichTextEditor();
    rte.setId("html-rte");
    add(rte);
    Div valuePanel = new Div();
    valuePanel.setId("html-binder-value-panel");
    Div infoPanel = new Div();
    Binder<HtmlEntry> binder = new Binder<>();
    // The object that will be edited
    HtmlEntry entryBeingEdited = new HtmlEntry();
    // Create the action buttons
    Button save = new Button("Save");
    Button reset = new Button("Reset");
    Button setBeanHtmlValue = new Button("Set bean html value");
    Button getValueButton = new Button("Get value");
    getValueButton.setId("get-html-binder-rte-value");
    getValueButton.addClickListener(event -> {
        String value = rte.asHtml().getValue();
        String webcomponentValue = rte.getElement().getProperty("htmlValue");
        valuePanel.setText(value + ' ' + webcomponentValue);
    });
    // Button bar
    HorizontalLayout actions = new HorizontalLayout();
    actions.add(save, reset, getValueButton, setBeanHtmlValue);
    save.getStyle().set("marginRight", "10px");
    SerializablePredicate<String> htmlValuePredicate = value -> {
        String htmlValue = rte.asHtml().getValue();
        return htmlValue != null && !htmlValue.trim().isEmpty();
    };
    Binding<HtmlEntry, String> asHtmlValueBinding = binder.forField(rte.asHtml()).withValidator(htmlValuePredicate, "html value should contain something").bind(HtmlEntry::getHtmlValue, HtmlEntry::setHtmlValue);
    // Editor is a required field
    rte.asHtml().setRequiredIndicatorVisible(true);
    // Click listeners for the buttons
    save.addClickListener(event -> {
        if (binder.writeBeanIfValid(entryBeingEdited)) {
            infoPanel.setText("Saved bean values: " + entryBeingEdited);
        } else {
            BinderValidationStatus<HtmlEntry> validate = binder.validate();
            String errorText = validate.getFieldValidationStatuses().stream().filter(BindingValidationStatus::isError).map(BindingValidationStatus::getMessage).map(Optional::get).distinct().collect(Collectors.joining(", "));
            infoPanel.setText("There are errors: " + errorText);
        }
    });
    reset.addClickListener(event -> {
        // clear fields by setting null
        binder.readBean(null);
        infoPanel.setText("");
    });
    setBeanHtmlValue.addClickListener(event -> {
        entryBeingEdited.setHtmlValue("<p><b>Foo</b></p>");
        binder.readBean(entryBeingEdited);
    });
    infoPanel.setId("html-binder-info");
    save.setId("html-binder-save");
    setBeanHtmlValue.setId("html-binder-set-bean-value");
    reset.setId("html-binder-reset");
    add(actions, infoPanel, valuePanel);
}