<body>
    <textarea id="editor">
      <section class="cover">
        <header class="editable">
          <img src="https://images.ctfassets.net/s600jj41gsex/2lGbhNz04fmwkpjH9wVNxJ/1ea0346b8e3d0372e3036254b501277f/template-document-logo_2x.png"  alt="demo document logo with triangle shapes" id="logo0A">
        </header>
          <main>
            <h1>Project proposal template</h1>
              <p class="editable">Mini-report content.</p>          
              <footer>
                <p><small>Confidential</small></p>
            </footer>
          </main>
      </section>
    </textarea>
</body>
        tinymce.init({
            selector: '#editor',
            height: 500,
            plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'code', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'editimage', 'wordcount'
            ],
            toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code',
            width: '500',
            toolbar_mode: 'wrap',
                      width: '600',
            editable_root: false,
            editable_class: 'editable',
            content_style: `
            body {
                background-color: #fed330;
                padding: 1rem;
               }
            `,
        });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6-dev/tinymce.min.js