froala-editor
Version:
A beautiful Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.
314 lines (278 loc) • 14 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<title>Froala Editor Examples</title>
<style>
body {
line-height: 1.5;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
section {
width: 90%;
margin: auto;
padding-top: 30px;
}
#data-list {
-webkit-column-gap: 30px;
/* Chrome, Safari, Opera */
-moz-column-gap: 30px;
/* Firefox */
column-gap: 30px;
-webkit-column-count: 4;
/* Chrome, Safari, Opera */
-moz-column-count: 4;
/* Firefox */
column-count: 4;
}
#data-list>div {
page-break-inside: avoid;
}
#data-list>div:after {
content: "";
display: block;
height: 20px;
}
h1 {
font-size: 36px;
font-weight: 300;
text-align: center;
}
h2 {
margin: 0;
color: #252525;
border-left: 3px solid #0098f7;
padding-left: 10px;
font-weight: 400;
}
ul {
padding-left: 5px;
}
ul li {
list-style: none;
font-size: 16px;
}
ul li a {
text-decoration: none;
color: #515151;
}
</style>
</head>
<body>
<section>
<h1>Froala Editor Examples</h1>
<br/>
<div id="data-list">
<div>
<h2>Popular</h2>
<ul>
<li><a href="./html/popular/full.html" title="Full Featured">Full Featured</a></li>
<li><a href="./html/popular/toolbar_inline.html" title="Inline Editor">Inline Editor</a></li>
<li><a href="./html/popular/two_instances.html" title="Multiple Editor Instances">Multiple Editor Instances</a></li>
<li><a href="./html/popular/textarea.html" title="Textarea Editor">Textarea Editor</a></li>
<li><a href="./html/popular/full_page.html" title="Full Page">Full Page</a></li>
<li><a href="./html/popular/iframe.html" title="Iframe">Iframe</a></li>
<li><a href="./html/popular/disable_edit.html" title="Non-editable Zones">Non-editable Zones</a></li>
<li><a href="./html/popular/z_index.html" title="Z-index">Z-index</a></li>
<li><a href="./html/popular/init_on_click.html" title="Init on Click">Init on Click</a></li>
<li><a href="./html/popular/toolbar_buttons.html" title="Change Toolbar Buttons">Change Toolbar Buttons</a></li>
<li><a href="./html/popular/disable_paragraphs.html" title="Disable Paragraphs">Disable Paragraphs</a></li>
</ul>
</div>
<div>
<h2>3rd Party Integration</h2>
<ul>
<li><a href="./html/3rd-party/aviary/index.html" title="Bootstrap Grid">Aviary Integration</a></li>
<li><a href="./html/3rd-party/bootstrap/grid.html" title="Bootstrap Grid">Bootstrap Grid</a></li>
<li><a href="./html/3rd-party/bootstrap/lists.html" title="Bootstrap List Group">Bootstrap List Group</a></li>
<li><a href="./html/3rd-party/bootstrap/modal.html" title="Bootstrap Modal">Bootstrap Modal</a></li>
<li><a href="./html/3rd-party/jquery/mobile.html" title="jQuery Mobile">jQuery Mobile</a></li>
<li><a href="./html/3rd-party/jquery/ui_modal.html" title="jQuery UI Modal">jQuery UI Modal</a></li>
<li><a href="./html/3rd-party/at.js.html" title="At.JS">At.JS</a></li>
<li><a href="./html/3rd-party/code-mirror.html" title="Code Mirror">Code Mirror</a></li>
<li><a href="./html/3rd-party/require_js/index.html" title="Require JS">Require JS</a></li>
<li><a href="./html/3rd-party/spell-checker/spell-checker.html" title="Spell Checker">Spell Checker</a></li>
</ul>
</div>
<div>
<h2>API</h2>
<ul>
<li><a href="./html/api/init_destroy.html" title="Init / Destroy Editor">Init / Destroy Editor</a></li>
<li><a href="./html/api/get_html.html" title="Get HTML">Get Edited HTML</a></li>
<li><a href="./html/api/insert_html.html" title="Insert HTML">Insert HTML</a></li>
<li><a href="./html/api/selection.html" title="Save / Restore Selection">Save / Restore Selection</a></li>
<li><a href="./html/api/live_content_preview.html" title="Live Content Preview">Live Content Preview</a></li>
<li><a href="./html/api/live_code_preview.html" title="Live Code Preview">Live Code Preview</a></li>
</ul>
</div>
<div>
<h2>International</h2>
<ul>
<li><a href="./html/international/direction_rtl.html" title="Editor Direction RTL">Editor Direction RTL</a></li>
<li><a href="./html/international/language.html" title="Change Language">Change Language</a></li>
<li><a href="./html/international/rtl_ltr_buttons.html" title="RTL / LTR Buttons">RTL / LTR Buttons</a></li>
</ul>
</div>
<div>
<h2>Buttons</h2>
<ul>
<li><a href="./html/buttons/custom_buttons.html" title="Custom Buttons">Custom Buttons</a></li>
<li><a href="./html/buttons/custom_dropdown.html" title="Custom Dropdown">Custom Dropdown</a></li>
<li><a href="./html/buttons/external_button.html" title="External Button">External Button</a></li>
<li><a href="./html/buttons/subscript_superscript.html" title="Subscript and Superscript">Subscript and Superscript</a></li>
</ul>
</div>
<div>
<h2>Events</h2>
<ul>
<li><a href="./html/events/blur_focus.html" title="Blur / Focus">Blur / Focus</a></li>
<li><a href="./html/events/content_changed.html" title="Content Changed">Content Changed</a></li>
<li><a href="./html/events/drop.html" title="Drop">Drop</a></li>
<li><a href="./html/events/image_removed.html" title="Image Removed">Image Removed</a></li>
<li><a href="./html/events/initialized_destroy.html" title="Initialized / Destroy">Initialized / Destroy</a></li>
</ul>
</div>
<div>
<h2>Images</h2>
<ul>
<li><a href="./html/image/custom_button.html" title="Custom Image Button">Custom Image Button</a></li>
<li><a href="./html/image/image_styles.html" title="Image Styles">Image Styles</a></li>
<li><a href="./html/image/default_width.html" title="Default Width">Default Width</a></li>
<li><a href="./html/image/insert_base64.html" title="Insert as Base64">Insert as Base64</a></li>
</ul>
</div>
<div>
<h2>Init inside iframe</h2>
<ul>
<li><a href="./html/init_inside_iframe/basic.html" title="Basic Editor inside iframe">Basic Editor</a></li>
<li><a href="./html/init_inside_iframe/inline.html" title="Inline Editor inside iframe">Inline Editor</a></li>
</ul>
</div>
<div>
<h2>Init on click</h2>
<ul>
<li><a href="./html/init_on_click/basic.html" title="Basic Editor">Basic Editor</a></li>
<li><a href="./html/init_on_click/inline.html" title="Inline Editor">Inline Editor</a></li>
<li><a href="./html/init_on_click/two_editors.html" title="2 Editors">2 Editors</a></li>
</ul>
</div>
<div>
<h2>Initialization</h2>
<ul>
<li><a href="./html/initialization/init_on_click.html" title="Init on click">Init on Click</a></li>
<li><a href="./html/initialization/init_on_button.html" title="Init on Button">Init on Button</a></li>
<li><a href="./html/initialization/init_on_link.html" title="Init on Link">Init on Link</a></li>
<li><a href="./html/initialization/init_on_image.html" title="Init on Image">Init on Image</a></li>
<li><a href="./html/initialization/init_on_h1.html" title="Init on H1">Init on H1</a></li>
<li><a href="./html/initialization/initialized_event.html" title="Initialized Event">Initialized Event</a></li>
<li><a href="./html/initialization/edit_in_popup.html" title="Edit in Popup">Edit in Popup</a></li>
</ul>
</div>
<div>
<h2>Links</h2>
<ul>
<li><a href="./html/link/link_styles.html" title="Link Styles">Link Styles</a></li>
<li><a href="./html/link/predefined_links.html" title="Predefined Links">Predefined Links</a></li>
<li><a href="./html/link/custom_validation.html" title="Custom Link Validation">Custom Link Validation</a></li>
</ul>
</div>
<div>
<h2>Plugins</h2>
<ul>
<li><a href="./html/plugins/line_breaker.html" title="Line Breaker">Line Breaker</a></li>
<li><a href="./html/plugins/quick_insert.html" title="Quick Insert">Quick Insert</a></li>
<li><a href="./html/plugins/char_counter.html" title="Char Counter">Char Counter</a></li>
<li><a href="./html/plugins/full_screen.html" title="Full Screen">Full Screen</a></li>
</ul>
</div>
<div>
<h2>Popups</h2>
<ul>
<li><a href="./html/popups/colors.html" title="Custom Color Picker">Custom Color Picker</a></li>
<li><a href="./html/popups/emoticons.html" title="Custom Emoticons">Custom Emoticons</a></li>
<li><a href="./html/popups/custom.html" title="Custom Popup">Custom Popup</a></li>
</ul>
</div>
<div>
<h2>Styling</h2>
<ul>
<li><a href="./html/styling/font_family.html" title="Font Family">Font Family</a></li>
<li><a href="./html/styling/inline.html" title="Inline Styling">Inline Styling</a></li>
<li><a href="./html/styling/paragraph.html" title="Paragraph Styling">Paragraph Styling</a></li>
<li><a href="./html/styling/placeholder.html" title="Placeholder">Placeholder</a></li>
<li><a href="./html/styling/height.html" title="Predefined Height">Predefined Height</a></li>
<li><a href="./html/styling/adjustable_height.html" title="Auto-Adjustable Height">Auto-Adjustable Height</a></li>
<li><a href="./html/styling/width.html" title="Predefined Width">Predefined Width</a></li>
</ul>
</div>
<div>
<h2>Themes</h2>
<ul>
<li><a href="./html/themes/dark.html" title="Dark Theme">Dark Theme</a></li>
<li><a href="./html/themes/gray.html" title="Gray Theme">Gray Theme</a></li>
<li><a href="./html/themes/red.html" title="Red Theme">Red Theme</a></li>
<li><a href="./html/themes/royal.html" title="Royal Theme">Royal Theme</a></li>
</ul>
</div>
<div>
<h2>Table</h2>
<ul>
<li><a href="./html/table/nested.html" title="Nested Tables">Nested Tables</a></li>
<li><a href="./html/table/resize.html" title="Resize Table">Resize Table</a></li>
<li><a href="./html/table/insert_helper.html" title="Table Insert Helper">Table Insert Helper</a></li>
<li><a href="./html/table/style.html" title="Table Style">Table Style</a></li>
<li><a href="./html/table/cell_style.html" title="Table Cell Style">Table Cell Style</a></li>
</ul>
</div>
<div>
<h2>Toolbar</h2>
<ul>
<li><a href="./html/toolbar/inline.html" title="Inline Toolbar">Inline Toolbar</a></li>
<li><a href="./html/toolbar/sticky.html" title="Sticky Toolbar">Sticky Toolbar</a></li>
<li><a href="./html/toolbar/buttons.html" title="Change Toolbar Buttons">Change Toolbar Buttons</a></li>
<li><a href="./html/toolbar/external.html" title="External Shared Toolbar">External Shared Toolbar</a></li>
<li><a href="./html/toolbar/external_inline.html" title="External Shared Inline Toolbar">External Shared Inline Toolbar</a></li>
<li><a href="./html/toolbar/bottom.html" title="Toolbar Bottom">Toolbar Bottom</a></li>
<li><a href="./html/toolbar/offset.html" title="Toolbar with Offset">Toolbar with Offset</a></li>
<li><a href="./html/toolbar/bottom_offset.html" title="Toolbar Bottom">Toolbar Bottom with Offset</a></li>
<li><a href="./html/toolbar/show_selection.html" title="Show Selection Details">Show Selection Details</a></li>
<li><a href="./html/toolbar/inline_selection.html" title="Inline Toolbar without Selection">Inline Toolbar without Selection</a></li>
</ul>
</div>
<div>
<h2>Paragraph Modes</h2>
<ul>
<li><a href="./html/paragraph_modes/enter_br.html" title="Enter BR">Enter BR</a></li>
<li><a href="./html/paragraph_modes/enter_div.html" title="Enter DIV">Enter DIV</a></li>
<li><a href="./html/paragraph_modes/enter_p.html" title="Enter P">Enter P</a></li>
</ul>
</div>
<div>
<h2>Misc</h2>
<ul>
<li><a href="./html/misc/scrollable_container.html" title="Scrollable Container">Scrollable Container</a></li>
<li><a href="./html/misc/scrollable_container_inline.html" title="Scrollable Container Inline Editor">Scrollable Container Inline</a></li>
</ul>
</div>
<div>
<h2>Typing</h2>
<ul>
<li><a href="./html/typing/tab.html" title="TAB Key">TAB Key</a></li>
<li><a href="./html/typing/shortcuts.html" title="Shortcuts">Shortcuts</a></li>
<li><a href="./html/typing/keep_format.html" title="Keep Format on Delete">Keep Format on Delete</a></li>
</ul>
</div>
<div>
<h2>Paste</h2>
<ul>
<li><a href="./html/paste/plain.html" title="Plain Paste">Plain Paste</a></li>
<li><a href="./html/paste/attrs.html" title="Allowed / Denied Attributes">Allowed / Denied Attributes</a></li>
<li><a href="./html/paste/tags.html" title="Allowed / Denied Tags">Allowed / Denied Tags</a></li>
</ul>
</div>
</div>
</section>
</body>