Show use of extender to extend functionality of the SunEditor by including the Katex Math plugin.
Source
<pe:markdownEditor id="txtMarkdown" widgetVar="mde" value="#{markdownEditorController.markdown}"
maxHeight="200px" toolbar="bold, italic, link, |, guide"
extender="editorExtender">
</pe:markdownEditor>
<script type="text/javascript">
function editorExtender() {
// this = widget
// this.cfg = JSON configuration
this.cfg.lineNumbers = true;
this.cfg.promptURLs = true;
this.cfg.promptTexts = {
image: "Custom prompt for URL:",
link: "Custom prompt for URL:",
};
};
</script>
@Named
@ViewScoped
public class MarkdownEditorController implements Serializable {
private static final long serialVersionUID = 1L;
private String markdown;
private boolean rtl;
@PostConstruct
public void init() {
this.markdown = "Markdown editing with **inline** styling!";
this.rtl = false;
}
public void addMessage(String message) {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
}
public void submit() {
addMessage(getMarkdown());
}
public void onPaste(AjaxBehaviorEvent e) {
addMessage("Paste event.");
}
public void onCopy(AjaxBehaviorEvent e) {
addMessage("Copy event.");
}
public void onCut(AjaxBehaviorEvent e) {
addMessage("Cut event.");
}
public String getMarkdown() {
return this.markdown;
}
public void setMarkdown(String markdown) {
this.markdown = markdown;
}
public boolean isRtl() {
return rtl;
}
public void setRtl(final boolean rtl) {
this.rtl = rtl;
}
}