·¬ÇÑÉçÇø

import com.psddev.cms.db.RichTextElement;
import com.psddev.dari.util.CompactMap;
import com.psddev.dari.util.StringUtils;

public class AnotherLinkRichTextElement extends RichTextElement {

    @Required
    private Link link; 

    private String linkText; 

    public String getLinkText() {
        return linkText;
    }

    public void setLinkText(String linkText) {
        this.linkText = linkText;
    }

    @Override
    public void fromBody(String body) { 
        setLinkText(StringUtils.unescapeHtml(body));
    }

    @Override
    public String toBody() { 
        return getLinkText();
    }

    @Override
    public void fromAttributes(Map<String, String> attributes) { 
        List<Attribute> createdAttributes = attributes.keySet()
                .stream()
                .map(key -> {
                    Attribute attribute = new Attribute();
                    attribute.setName(key);
                    attribute.setValue(attributes.get(key));

                    return attribute;

                })
                .collect(Collectors.toList());

        link.setAttributes(createdAttributes);
    }

    @Override
    public Map<String, String> toAttributes() { 
        Map<String, String> htmlAttributes = new CompactMap<>(); 
        link.getAttributes()
                .forEach(attribute -> htmlAttributes.put(attribute.getName(), attribute.getValue()));
        return htmlAttributes; 
    }
}

• Declares a Link field that contains the attributes in an HTML <a> element.
• Declares a field, getter, and setter for the link text (the text inside an HTML <a> element.
• Populates the field Link Text in the editing widget, unescaping any escaped HTML entities that may have been received from the rich-text element.
• Retrieves the value in the field Link Text, and uses it as the link text when constructing an HTML <a> element.
• Reads the attribute map passed from the rich-text element and populates the Attributes list in the editing widget's Advanced tab.
• Reads the Attributes list in the editing widget's Advanced tab, and uses it to construct the attributes in an HTML <a> element.

import com.psddev.cms.db.RichTextElement;
import com.psddev.dari.db.Recordable;
import com.psddev.dari.util.StringUtils;

@Recordable.DisplayName("Pull Quote") 1
    @RichTextElement.Tag( 2
    value = "quote",
    preview = true,
    block = false,
    root = true,
    menu = "Enhancement")
public class PullQuoteRichTextElement extends RichTextElement {

    @Required
    private String quote;

    public String getQuote() {
        return quote;
    }

    public void setQuote(String quote) {
        this.quote = quote;
    }

    @Override 3
    public Map<String, String> toAttributes() {
        return null;
    }

    @Override
    public void fromAttributes(Map<String, String> attributes) {
    }

    @Override
    public void fromBody(String body) {
        setQuote(StringUtils.unescapeHtml(body));
    }

    @Override
    public String toBody() {
        return getQuote();
    }

}

• Specifies the rich-text element displays as a pull quote in the rich-text toolbar.
• Specifies the presentation aspects of the rich-text element:
  

  • The theme's data files use the value element for creating the view. In this snippet, the data files must provision the rich-text element using the identifier quote.
  • In the toolbar, the rich-text element appears under the menu item Enhancement.

  For information about the @RichTextElement.Tag annotation see @RichTextElement.Tag.
• Overrides the methods toAttributes, fromAttributes, fromBody, and toBody. These methods provide the interface between the rich-text element and the associated editing widget. For details, see Editing lifecycle of rich-text elements.

import com.psddev.cms.rte.RichTextToolbar;
import com.psddev.cms.rte.RichTextToolbarItem;
import com.psddev.cms.rte.RichTextToolbarStyle;

public class CustomRichTextToolbar implements RichTextToolbar {

    @Override
    public List<RichTextToolbarItem> getItems() { 1
        return Arrays.asList(
            RichTextToolbarStyle.BOLD,
            RichTextToolbarStyle.ITALIC,
            RichTextToolbarStyle.UNDERLINE
            RichTextToolbarStyle.ELEMENTS);
    }

}

• Attaches all custom rich-text elements to the toolbar.

./ 

└── <root> 

            ├── src |

                       └── main |

                                  └── java |

                                            └── brightspot |

                                                       └── content |

                                                                  └── article |

                                                                             └── PullQuoteRichTextElement.java 

             └── styleguide 

                        └── content  

                                   └── article 

                                              ├── PullQuoteRichTextElement.hbs 

                                              ├── PullQuoteRichTextElement.json 

                                              └── PullQuoteRichTextElement.less

{
  "caption": "Here is a link <a href=\"http://www.brightspot.com/\" target=\"_blank\" cursor=\"wait\" type=\"text/html\" >Brightspot</a>."
}