JSFiddle - React, Tailwind, and code Playground

by faceleg

HTML

<script src="https://raw.github.com/PANmedia/Raptor/master/packages/raptor.0deps.min.js"></script>
<textarea id="raptor">
    <table>
      <tbody>$GarbagePailKids</tbody>
    </table>
</textarea>

CSS

#raptor {
    width: 750px;
    height: 300px;
    padding: 10px;
}
.ui-editor-dock-docked-element {
    outline: 1px solid gray;
}

JavaScript

$(function() {
    $('#raptor').editor({
        // Enable editor immediately
        autoEnable: true,
        // Replace the element with the editor
        replace: true,
        // Disable the cancel, save & dock buttons
        disabledUi: ['cancel', 'save', 'dock'],
        // Disable the unsaved edits warning, and the clean & empty element plugins, both of which will attempt to fix broken HTML
        disabledPlugins: ['unsavedEditWarning', 'clean', 'emptyElement'],
        // Disable the "you have unsaved edits on this page" warning triggered when one attempts to leave the page after editing
        unloadWarning: false,
        // Plugin specific options
        plugins: {
            // Docking options forcing the editor to be always docked to the textarea
            dock: {
                docked: true,
                dockToElement: true,
                persistent: false
            }                
        }                
    }); 
});