Apply styles for WYSIWYG content

[dtrucs]

ref #62
I'm keeping this PR as a draft until the ARG has updated its tinyMCE configuration.

I used tinyMCE version 5 (https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js)
And below is the tinyMCE configuration corresponding to this development:

tinymce.init({
  selector: 'textarea',
  height: 800,
  plugins: [
    'autolink lists link image',
    'media mediaembed',
    'media table paste imagetools wordcount image_caption',
    'visualblocks'
  ],
  menubar: false,
  image_caption: true,
  toolbar: 'undo redo | styleselect | blockquote | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image media | visualblocks',
  formats: {
    information: { 
      block: 'div', classes: 'information'
    }
  },
  style_formats: [
    { title: 'Headings', items: [
      {title: 'Headings 2', format: 'h2'},
      {title: 'Headings 3', format: 'h3'},
      {title: 'Headings 4', format: 'h4'},
      {title: 'Headings 5', format: 'h5'},
      {title: 'Headings 6', format: 'h6'}
    ]},
    {title: 'Inline', items: [
      {title: 'Bold', format: 'bold'},
      {title: 'Italic', format: 'italic'},
      {title: 'Underline', format: 'underline'},
      {title: 'Strikethrough', format: 'strikethrough'},
    ]},
    {title: 'Blocks', items: [
      {title: 'Paragraph', format: 'p'},
      {title: 'Blockquote', format: 'blockquote'},
      {title: 'Information', format: 'information'},
    ]},
    {title: 'Alignment', items: [
      {title: 'Left', format: 'alignleft'},
      {title: 'Center', format: 'aligncenter'},
      {title: 'Right', format: 'alignright'},
      {title: 'Justify', format: 'alignjustify'}
    ]}
  ],
  forced_root_block : false,
  default_font_stack: [ '-apple-system', 'Helvetica', 'Arial', 'sans-serif' ],
  content_style: `
  h1,h2,h3 {
    clear:both;
  }
  .align-left {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
  }
  .align-right {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
  }
  .information {
     clear: both;
     padding: 1rem;
     background: lightgray;
  }
`
});

[dtrucs]

Compatibility with TinyMCE4 (the only change is the removal of the image_caption plugin, which doesn't yet exist in this version)

tinymce.init({
  selector: 'textarea',
  height: 800,
  plugins: [
    'autolink lists link image',
    'media mediaembed',
    'media table paste imagetools wordcount',
    'visualblocks'
  ],
  menubar: false,
  image_caption: true,
  toolbar: 'undo redo | styleselect | blockquote | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image media | visualblocks',
  formats: {
    informationFormat: { 
      block: 'div', classes: 'information'
    }
  },
  style_formats: [
    { title: 'Headings', items: [
      {title: 'Headings 2', format: 'h2'},
      {title: 'Headings 3', format: 'h3'},
      {title: 'Headings 4', format: 'h4'},
      {title: 'Headings 5', format: 'h5'},
      {title: 'Headings 6', format: 'h6'}
    ]},
    {title: 'Inline', items: [
      {title: 'Bold', format: 'bold'},
      {title: 'Italic', format: 'italic'},
      {title: 'Underline', format: 'underline'},
      {title: 'Strikethrough', format: 'strikethrough'},
    ]},
    {title: 'Blocks', items: [
      {title: 'Paragraph', format: 'p'},
      {title: 'Blockquote', format: 'blockquote'},
      {title: 'Information', format: 'informationFormat'},
    ]},
    {title: 'Alignment', items: [
      {title: 'Left', format: 'alignleft'},
      {title: 'Center', format: 'aligncenter'},
      {title: 'Right', format: 'alignright'},
      {title: 'Justify', format: 'alignjustify'}
    ]}
  ],
  forced_root_block : false,
  default_font_stack: [ '-apple-system', 'Helvetica', 'Arial', 'sans-serif' ],
  content_style: `
  h1,h2,h3 {
    clear:both;
  }
  .align-left {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
  }
  .align-right {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
  }
  .information {
     clear: both;
     padding: 1rem;
     background: lightgray;
  }
  
`
});