Template Editing 2

by whelkaholism

HTML

<button id="b">
Render
</button>
<hr>

<div id="t">

<!-- cfmeta: { Destination:Client, Name: Clients: Auto upcoming OV courses, Description: List of upcoming courses near to client; sent monthly by system } -->
<h1 class="blah">
    Upcoming  Paediatric First Aid courses
</h1>
<p>
    Hello,
</p>
<p>
    Please find below a list of our Paediatric First Aid Courses available in your area at our Training Centres.  We also can deliver training at your place of work for as little as £62.50 per person.
</p>
<p>
    Our Blended Paediatric First Aid Course meets the new EYFS 2021 and OFSTED guidance and is delivered as a one-day practical course with an at-home eLearning module.  Our training is recommended by OFSTED and is delivered to over 80,000 learners every year
</p>
<p>
    As per new guidance, all courses include a FREE annual online refresher course.
</p>
<p>
    For individual bookings please booked online following the link below or for group bookings, please email <a href="maito:[email protected]">[email protected]</a> or call us on <strong>0300 3020 999</strong> for a competitive quote.
</p>
<p>
    <em>Please note that as a not for profit company we do not charge VAT.</em>
</p>
<p>
    We look forward to speaking with you soon
</p>
<style>
    table tr td a:hover {
        background: #4f2682 !important
    }
</style>
<table style="border:none;margin-bottom:20px;border-collapse:collapse;width:100%;">
    <tr>
        <th style="text-align:left;font-size:14px;padding-right:10px;">Course</th>
        <th style="text-align:left;font-size:14px;padding-right:10px;">Location</th>
        <!--
            <th style="text-align:left;font-size:16px;padding-right:10px;">Distance</th>
        -->
        <th></th>
    </tr>
    <!--{FOREACH:Attachments{-->
    <tr>
        <td style="padding:5px 10px 10px 0;font-size:13px;white-space:nowrap;vertical-align:top;border-top:1px solid #dddddd">
    ...

CSS

body { width: 600px; }

.cf-et-text-parent:hover {
  background: rgba(255, 255, 0, 0.5);
  cursor: pointer;
}

.cf-show-nodes .cf-et-text-parent {
  border: 1px dashed rgba(0, 0, 255, 0.5);;
}

.cf-etp-editing {
    border: 1px dotted #dddddd;
    border-radius: 3px;
    box-shadow: 3px 3px 5px -3px rgba(0, 0, 0, 1.25) inset;
    padding: 5px;
}

.cf-et-control.inactive {
  opacity: 0.25;
}

JavaScript

(function()
{
    if (typeof (window.EditableTemplate) == 'undefined')
    {
        window.EditableTemplate = function (el, options)
        {
            var _this = this;
            var _tree = {};
            var _el;
            var _options = options || {};
            var _toolbar;
            var _buttons = {
                undo: null,
                redo: null,
                revert: null
            };
            var _historyindex = -1;
            var _historysize = 0;
            var _historythrottle;

            _options.allowRevert = typeof (_options.allowRevert) != 'undefined' ? !!_options.allowRevert : true;
            _options.allowUndoRedo = typeof (_options.allowUndoRedo) != 'undefined' ? !!_options.allowUndoRedo : true;
            _options.debug = typeof (_options.debug) != 'undefined' ? !!_options.debug : true;
            _options.historyThrottleTime = _options.historyThrottleTime || 500;

            this.confirm = function(s)
            {
                var res = new Promise(function(resolve)
                {
                    resolve(confirm(s));
                });

                return res;
            }

            this.create = function(el)
            {
                _el = el;
                _create(_el, _tree); // Recursive builder

                document.body.addEventListener('click', function()
                {
                    _this.closeAll();
                });

                _this.initUI();
                _this.initEditing();
            }

            this.initUI = function()
            {
                if (_options.allowRevert || _options.allowUndoRedo)
                {
                    _toolbar = document.createElement('DIV');
                    _toolbar.classList.add('cf-et-toolbar');

                    _el.parentNode.insertBefore(_toolbar, _el);

                    if (_options.allowRevert)
                    {
            ...