JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Offer Content</title>
    <!-- Add CKEditor CDN -->
    <script src="https://cdn.ckeditor.com/ckeditor5/40.2.2/classic/ckeditor.js"></script>
</head>
<body>

<div style="width: 1000px; margin: 20px auto;">
    <button style="padding: 10px; cursor: pointer;" onclick="openOverlay()">Add Offer</button>
</div>

<div id="overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px;">
        <!-- CKEditor Container -->
        <div id="editor" style="height: 200px;"></div>
        <br>
        <button style="padding: 10px; cursor: pointer; margin-top: 10px;" onclick="saveOffer()">Save</button>
        <button style="padding: 10px; cursor: pointer; margin-top: 10px;" onclick="closeOverlay()">Close</button>
    </div>
</div>

<script>
    function openOverlay() {
        document.getElementById('overlay').style.display = 'block';

        // Initialize CKEditor
        ClassicEditor
            .create(document.querySelector('#editor'))
            .catch(error => {
                console.error(error);
            });
    }

    function closeOverlay() {
        document.getElementById('overlay').style.display = 'none';

        // Destroy CKEditor instance when closing the overlay
        if (typeof ClassicEditor !== 'undefined') {
            ClassicEditor.instances.forEach(editor => {
                editor.destroy();
            });
        }
    }

    function saveOffer() {
        // Retrieve content from CKEditor
        ClassicEditor
            .instances
            .forEach(editor => {
                var offerContent = editor.getData();
                // Perform actions with offerContent if needed
          ...