froala/TinyMCE Migration Guide/Demo/Basic Example

by froala

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/froala-editor@2.9.1/js/froala_editor.pkgd.min.js"></script>
<!-- Create a tag that we will use as the editable area. -->
<!-- You can use a div tag as well. -->
<textarea>
  <h2>Froala WYSIWYG HTML Editor</h2>

  <p><span class="fr-img-caption fr-fir fr-dii" style="width: 383px;"><span class="fr-img-wrap"><img src="https://s3-eu-west-1.amazonaws.com/froala-eu/temp_files%2F1543330995331-undraw_developer_activity_bv83.png" alt="Editor photo"><span class="fr-inner"><em>Web developer</em></span></span>&nbsp;</span>Froala Editor is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications.</p>

  <p>Its complete <a href="/wysiwyg-editor/docs" title="Documentation">documentation</a>, specially designed <a href="#frameworks" title="Frameworks">framework plugins</a> and <a href="/wysiwyg-editor/examples" title="Examples">tons of examples</a> make it easy to integrate. We're continuously working to add in new features and take the Javascript web WYSIWYG editing capabilities beyond its current limits.</p>

  <table style="width: 100%;">
    <tbody>
      <tr>
        <td style="width: 12.5000%;">
          <br>
        </td>
        <td style="width: 12.5000%;">
          <br>
        </td>
        <td...

CSS

body {
  padding:5px;
}

JavaScript

$(function(){ 
  $('textarea').froalaEditor({
    height: 500,
    pluginsEnabled: ['lists', 'link', 'image', 'specialCharacters', 'print', 'colors', 'align', 'codeBeautifier', 'codeView', 'fullscreen', 'video', 'table', 'wordPaste', 'help', 'charCounter', 'paragraphFormat'],
    toolbarButtons: ['insertVideo', 'insertImage', 'insertLink', 'specialCharacters', '|', 'undo', 'redo', '|', 'paragraphFormat', '|', 'bold', 'italic', 'color', '|', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'clearFormatting', '|', 'help'],
    paragraphFormatSelection: true,
    iframe: true,
    iframeStyleFiles: [
      '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
      '//cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_style.min.css'
    ]
  });
});