xmnk
/
wkshi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
							<!DOCTYPE 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>