Tiny Rich Editor

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!--
    This demo showcases a minimalist editor that expands on focus
    It uses the TinyMCE inline mode to allow for greater control
        over the toolbar position and behavior.

https://www.tiny.cloud/blog/javascript-rich-text-editor/
-->

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Expand and show toolbar demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>

    <script>
        tinymce.init({
            selector: "#editor-content",
            plugins: "emoticons hr image link lists charmap table",
            toolbar: "formatgroup paragraphgroup insertgroup",
            placeholder: "Ask a question or post an update...",
            menubar: false,
            skin: 'naked',
            icons: 'thin',

            // Enable inline mode
            // https://www.tiny.cloud/docs/configure/editor-appearance/#inline
            inline: true,

            // Render the toolbar in this container.
            // https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
            fixed_toolbar_container: '#editor-toolbar',

            // Makes menus move upwards
            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_location
            toolbar_location: 'bottom',

            // Remove the manual image resizing as we're using percentage widths
    ...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}