Demos
Browse all demos

Paragraph and Inline Styles

Give authors your house styles: named paragraph and inline styles, and only the fonts, sizes and line heights you allow.

  • config.paragraphStyles and config.inlineStyles list named styles. Each is either a CSS class or inline CSS with a preview for the menu.
  • A paragraph style applies to every paragraph the selection touches; an inline style wraps the selected text.
  • fontNameItems, fontSizeItems and lineHeightItems narrow the menus to your values.
  • Class-based styles need CSS in the editor (config.contentCssText or contentCssUrl) and on the page that shows the saved HTML.
<div id="div_editor1"></div>
<script>
    var config = {};
    config.toolbar = "styles";
    config.toolbar_styles = "{paragraphs,paragraphstyle,inlinestyle}|{fontname,fontsize,lineheight}|{bold,italic,forecolor}";

    // [label, CSS to apply, CSS for the menu preview]  or  [label, class name]
    config.paragraphStyles = [
        ["Lead paragraph", "lead-paragraph"],
        ["Note callout", "note-callout"],
        ["Centered", "text-align:center", "text-align:center"]
    ];
    config.inlineStyles = [
        ["Marker", "marker"],
        ["Small caps", "small-caps"],
        ["Brand blue", "color:#0369a1;font-weight:600", "color:#0369a1;font-weight:600"]
    ];
    config.fontNameItems = "Georgia,Segoe UI,Verdana,Courier New";
    config.fontSizeItems = "12,14,16,18,24,32";
    config.lineHeightItems = "100%,120%,150%,200%";

    // Classes need CSS inside the editor (and on the page that displays the HTML).
    config.contentCssText = ".note-callout{border-left:4px solid #0ea5e9;background:#f0f9ff;padding:8px 12px}" +
        ".lead-paragraph{font-size:1.2em}.marker{background:linear-gradient(transparent 55%,#fde68a 55%)}" +
        ".small-caps{font-variant:small-caps}";

    var editor1 = new RichTextEditor("#div_editor1", config);
</script>