angular-froala-wysiwyg-2.7.1
Version:
Angular 2 and Angular 4 bindings for Froala WYSIWYG HTML rich text editor
308 lines (274 loc) • 14.3 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="/dist/html/popular/full.html" title="Full Featured">Full Featured</a></li>
<li><a href="/dist/html/popular/toolbar_inline.html" title="Inline Editor">Inline Editor</a></li>
<li><a href="/dist/html/popular/two_instances.html" title="Multiple Editor Instances">Multiple Editor Instances</a></li>
<li><a href="/dist/html/popular/textarea.html" title="Textarea Editor">Textarea Editor</a></li>
<li><a href="/dist/html/popular/full_page.html" title="Full Page">Full Page</a></li>
<li><a href="/dist/html/popular/iframe.html" title="Iframe">Iframe</a></li>
<li><a href="/dist/html/popular/disable_edit.html" title="Non-editable Zones">Non-editable Zones</a></li>
<li><a href="/dist/html/popular/z_index.html" title="Z-index">Z-index</a></li>
<li><a href="/dist/html/popular/init_on_click.html" title="Init on Click">Init on Click</a></li>
<li><a href="/dist/html/popular/toolbar_buttons.html" title="Change Toolbar Buttons">Change Toolbar Buttons</a></li>
<li><a href="/dist/html/popular/disable_paragraphs.html" title="Disable Paragraphs">Disable Paragraphs</a></li>
</ul>
</div>
<div>
<h2>3rd Party Integration</h2>
<ul>
<li><a href="/dist/html/3rd-party/aviary/index.html" title="Bootstrap Grid">Aviary Integration</a></li>
<li><a href="/dist/html/3rd-party/bootstrap/grid.html" title="Bootstrap Grid">Bootstrap Grid</a></li>
<li><a href="/dist/html/3rd-party/bootstrap/lists.html" title="Bootstrap List Group">Bootstrap List Group</a></li>
<li><a href="/dist/html/3rd-party/bootstrap/modal.html" title="Bootstrap Modal">Bootstrap Modal</a></li>
<li><a href="/dist/html/3rd-party/jquery/mobile.html" title="jQuery Mobile">jQuery Mobile</a></li>
<li><a href="/dist/html/3rd-party/jquery/ui_modal.html" title="jQuery UI Modal">jQuery UI Modal</a></li>
<li><a href="/dist/html/3rd-party/at.js.html" title="At.JS">At.JS</a></li>
<li><a href="/dist/html/3rd-party/code-mirror.html" title="Code Mirror">Code Mirror</a></li>
<li><a href="/dist/html/3rd-party/require_js/index.html" title="Require JS">Require JS</a></li>
<li><a href="/dist/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="/dist/html/api/init_destroy.html" title="Init / Destroy Editor">Init / Destroy Editor</a></li>
<li><a href="/dist/html/api/get_html.html" title="Get HTML">Get Edited HTML</a></li>
<li><a href="/dist/html/api/insert_html.html" title="Insert HTML">Insert HTML</a></li>
<li><a href="/dist/html/api/selection.html" title="Save / Restore Selection">Save / Restore Selection</a></li>
<li><a href="/dist/html/api/live_content_preview.html" title="Live Content Preview">Live Content Preview</a></li>
<li><a href="/dist/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="/dist/html/international/direction_rtl.html" title="Editor Direction RTL">Editor Direction RTL</a></li>
<li><a href="/dist/html/international/language.html" title="Change Language">Change Language</a></li>
<li><a href="/dist/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="/dist/html/buttons/custom_buttons.html" title="Custom Buttons">Custom Buttons</a></li>
<li><a href="/dist/html/buttons/custom_dropdown.html" title="Custom Dropdown">Custom Dropdown</a></li>
<li><a href="/dist/html/buttons/external_button.html" title="External Button">External Button</a></li>
<li><a href="/dist/html/buttons/subscript_superscript.html" title="Subscript and Superscript">Subscript and Superscript</a></li>
</ul>
</div>
<div>
<h2>Events</h2>
<ul>
<li><a href="/dist/html/events/blur_focus.html" title="Blur / Focus">Blur / Focus</a></li>
<li><a href="/dist/html/events/content_changed.html" title="Content Changed">Content Changed</a></li>
<li><a href="/dist/html/events/drop.html" title="Drop">Drop</a></li>
<li><a href="/dist/html/events/image_removed.html" title="Image Removed">Image Removed</a></li>
<li><a href="/dist/html/events/initialized_destroy.html" title="Initialized / Destroy">Initialized / Destroy</a></li>
</ul>
</div>
<div>
<h2>Images</h2>
<ul>
<li><a href="/dist/html/image/custom_button.html" title="Custom Image Button">Custom Image Button</a></li>
<li><a href="/dist/html/image/image_styles.html" title="Image Styles">Image Styles</a></li>
<li><a href="/dist/html/image/default_width.html" title="Default Width">Default Width</a></li>
<li><a href="/dist/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="/dist/html/init_inside_iframe/basic.html" title="Basic Editor inside iframe">Basic Editor</a></li>
<li><a href="/dist/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="/dist/html/init_on_click/basic.html" title="Basic Editor">Basic Editor</a></li>
<li><a href="/dist/html/init_on_click/inline.html" title="Inline Editor">Inline Editor</a></li>
<li><a href="/dist/html/init_on_click/two_editors.html" title="2 Editors">2 Editors</a></li>
</ul>
</div>
<div>
<h2>Initialization</h2>
<ul>
<li><a href="/dist/html/initialization/init_on_click.html" title="Init on click">Init on Click</a></li>
<li><a href="/dist/html/initialization/init_on_button.html" title="Init on Button">Init on Button</a></li>
<li><a href="/dist/html/initialization/init_on_link.html" title="Init on Link">Init on Link</a></li>
<li><a href="/dist/html/initialization/init_on_image.html" title="Init on Image">Init on Image</a></li>
<li><a href="/dist/html/initialization/init_on_h1.html" title="Init on H1">Init on H1</a></li>
<li><a href="/dist/html/initialization/initialized_event.html" title="Initialized Event">Initialized Event</a></li>
<li><a href="/dist/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="/dist/html/link/link_styles.html" title="Link Styles">Link Styles</a></li>
<li><a href="/dist/html/link/predefined_links.html" title="Predefined Links">Predefined Links</a></li>
<li><a href="/dist/html/link/custom_validation.html" title="Custom Link Validation">Custom Link Validation</a></li>
</ul>
</div>
<div>
<h2>Plugins</h2>
<ul>
<li><a href="/dist/html/plugins/line_breaker.html" title="Line Breaker">Line Breaker</a></li>
<li><a href="/dist/html/plugins/quick_insert.html" title="Quick Insert">Quick Insert</a></li>
<li><a href="/dist/html/plugins/char_counter.html" title="Char Counter">Char Counter</a></li>
<li><a href="/dist/html/plugins/full_screen.html" title="Full Screen">Full Screen</a></li>
</ul>
</div>
<div>
<h2>Popups</h2>
<ul>
<li><a href="/dist/html/popups/colors.html" title="Custom Color Picker">Custom Color Picker</a></li>
<li><a href="/dist/html/popups/emoticons.html" title="Custom Emoticons">Custom Emoticons</a></li>
<li><a href="/dist/html/popups/custom.html" title="Custom Popup">Custom Popup</a></li>
</ul>
</div>
<div>
<h2>Styling</h2>
<ul>
<li><a href="/dist/html/styling/font_family.html" title="Font Family">Font Family</a></li>
<li><a href="/dist/html/styling/inline.html" title="Inline Styling">Inline Styling</a></li>
<li><a href="/dist/html/styling/paragraph.html" title="Paragraph Styling">Paragraph Styling</a></li>
<li><a href="/dist/html/styling/placeholder.html" title="Placeholder">Placeholder</a></li>
<li><a href="/dist/html/styling/height.html" title="Predefined Height">Predefined Height</a></li>
<li><a href="/dist/html/styling/adjustable_height.html" title="Auto-Adjustable Height">Auto-Adjustable Height</a></li>
<li><a href="/dist/html/styling/width.html" title="Predefined Width">Predefined Width</a></li>
</ul>
</div>
<div>
<h2>Themes</h2>
<ul>
<li><a href="/dist/html/themes/dark.html" title="Dark Theme">Dark Theme</a></li>
<li><a href="/dist/html/themes/gray.html" title="Gray Theme">Gray Theme</a></li>
<li><a href="/dist/html/themes/red.html" title="Red Theme">Red Theme</a></li>
<li><a href="/dist/html/themes/royal.html" title="Royal Theme">Royal Theme</a></li>
</ul>
</div>
<div>
<h2>Table</h2>
<ul>
<li><a href="/dist/html/table/nested.html" title="Nested Tables">Nested Tables</a></li>
<li><a href="/dist/html/table/resize.html" title="Resize Table">Resize Table</a></li>
<li><a href="/dist/html/table/insert_helper.html" title="Table Insert Helper">Table Insert Helper</a></li>
<li><a href="/dist/html/table/style.html" title="Table Style">Table Style</a></li>
<li><a href="/dist/html/table/cell_style.html" title="Table Cell Style">Table Cell Style</a></li>
</ul>
</div>
<div>
<h2>Toolbar</h2>
<ul>
<li><a href="/dist/html/toolbar/inline.html" title="Inline Toolbar">Inline Toolbar</a></li>
<li><a href="/dist/html/toolbar/sticky.html" title="Sticky Toolbar">Sticky Toolbar</a></li>
<li><a href="/dist/html/toolbar/buttons.html" title="Change Toolbar Buttons">Change Toolbar Buttons</a></li>
<li><a href="/dist/html/toolbar/external.html" title="External Shared Toolbar">External Shared Toolbar</a></li>
<li><a href="/dist/html/toolbar/external_inline.html" title="External Shared Inline Toolbar">External Shared Inline Toolbar</a></li>
<li><a href="/dist/html/toolbar/bottom.html" title="Toolbar Bottom">Toolbar Bottom</a></li>
<li><a href="/dist/html/toolbar/offset.html" title="Toolbar with Offset">Toolbar with Offset</a></li>
<li><a href="/dist/html/toolbar/bottom_offset.html" title="Toolbar Bottom">Toolbar Bottom with Offset</a></li>
<li><a href="/dist/html/toolbar/show_selection.html" title="Show Selection Details">Show Selection Details</a></li>
<li><a href="/dist/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="/dist/html/paragraph_modes/enter_br.html" title="Enter BR">Enter BR</a></li>
<li><a href="/dist/html/paragraph_modes/enter_div.html" title="Enter DIV">Enter DIV</a></li>
<li><a href="/dist/html/paragraph_modes/enter_p.html" title="Enter P">Enter P</a></li>
</ul>
</div>
<div>
<h2>Misc</h2>
<ul>
<li><a href="/dist/html/misc/scrollable_container.html" title="Scrollable Container">Scrollable Container</a></li>
<li><a href="/dist/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="/dist/html/typing/tab.html" title="TAB Key">TAB Key</a></li>
<li><a href="/dist/html/typing/shortcuts.html" title="Shortcuts">Shortcuts</a></li>
<li><a href="/dist/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="/dist/html/paste/plain.html" title="Plain Paste">Plain Paste</a></li>
<li><a href="/dist/html/paste/attrs.html" title="Allowed / Denied Attributes">Allowed / Denied Attributes</a></li>
<li><a href="/dist/html/paste/tags.html" title="Allowed / Denied Tags">Allowed / Denied Tags</a></li>
</ul>
</div>
</div>
</section>
</body>