froala/TinyMCE Migration Guide/Demo/Custom Formats

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>
<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 style="width: 12.5000%;">
          <br>
        </td>
        <td style="width: 12.5000%;">
         ...

SCSS

body {
  padding:5px;
}

.fr-view .fr-class-highlighted {
  background-color: #ffff00;
}

.fr-view .fr-class-code {
  border-color: #cccccc;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background: #f5f5f5;
  padding: 10px;
  font-family: "Courier New", Courier, monospace;
}

.fr-view .fr-class-transparency {
  opacity: 0.5;
}

.fr-view .fr-text-gray {
  color: #AAA !important;
}
.fr-view .fr-text-bordered {
  border-top: solid 1px #222;
  border-bottom: solid 1px #222;
  padding: 10px 0;
}
.fr-view .fr-text-spaced {
  letter-spacing: 1px;
}
.fr-view .fr-text-uppercase {
  text-transform: uppercase;
}

JavaScript

$(function(){ 
  $('textarea').froalaEditor({
    height: 500,
    toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', '|', 'inlineClass', 'inlineStyle', 'paragraphStyle', 'paragraphFormat', 'align', 'undo', 'redo', 'html'],
    inlineClasses: {
      'fr-class-code': 'Code',
      'fr-class-highlighted': 'Highlighted',
      'fr-class-transparency': 'Transparent'
    },
    inlineStyles: {
      'Big Red': 'font-size: 20px; color: red;',
      'Small Blue': 'font-size: 14px; color: blue;'
    },
    paragraphStyles: {
      'fr-text-gray': 'Gray',
      'fr-text-bordered': 'Bordered',
      'fr-text-spaced': 'Spaced',
      'fr-text-uppercase': 'Uppercase'
    }
  });
});