JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@kademi/keditor@2.0.1/dist/js/keditor.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kademi/keditor@2.0.1/dist/css/keditor.css" data-type="keditor-style">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" data-type="keditor-style">
<div id="content-area"></div>
<script type="text/javascript" data-keditor="script">
$(function () {
$('#content-area').keditor();
});
</script>
JavaScript
(function ($) {
// Mocked functions because not provided in the question
const noop = str => str;
const html_beautify = noop;
const js_beautify = noop;
const PR = {
prettyPrintOne: noop
}
$(function () {
initModalSource();
initModalContent();
initToolbar();
});
function initToolbar() {
var toolbar = $('<div class="toolbar"></div>');
var btnViewSource = $('<button type="button" class="view-source"><i class="fa fa-code"></i> View source</button>');
var btnViewContent = $('<button type="button" class="view-content"><i class="fa fa-file-text-o"></i> Get content</button>');
var btnBackToList = $('<a href="./" class="view-content"><i class="fa fa-list"></i> Examples list</a>');
toolbar.appendTo(document.body);
toolbar.append(btnViewSource);
toolbar.append(btnViewContent);
toolbar.append(btnBackToList);
btnViewSource.on('click', function () {
$('#modal-source').modal('show');
});
btnViewContent.on('click', function () {
var modal = $('#modal-content');
modal.find('.content-html').html(
beautifyHtml(
$('#content-area').keditor('getContent')
)
);
modal.modal('show');
});
}
function initModalContent() {
var modal = $(
'<div id="modal-content" class="modal fade" tabindex="-1">' +
' <div class="modal-dialog modal-lg">' +
' <div class="modal-content">' +
' <div class="modal-header">' +
' <button type="button" class="close" data-dismiss="modal">×</button>' +
' <h4 class="modal-title">Content</h4>' +
' </div>' +
' <div class="modal-body">' +
' <pre class="prettyprint lang-html...