svalavuo
/
website


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WYSIWYG Editor Test</title>
    <link rel="stylesheet" href="css/wysiwyg.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-form {
            margin-top: 20px;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .btn-primary {
            background-color: #3b82f6;
            color: white;
        }
        .btn-secondary {
            background-color: #6b7280;
            color: white;
        }
        .output {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            background-color: #f9fafb;
        }
    </style>
</head>
<body>
    <h1>WYSIWYG Editor Test</h1>
    
    <form class="test-form" id="testForm">
        <div class="form-group">
            <label for="title">Title:</label>
            <input type="text" id="title" name="title" value="Test Publication">
        </div>
        
        <div class="form-group">
            <label for="content" class="wysiwyg-label">Content:</label>
            <textarea id="content" name="content" rows="20" style="display: none;">
                <h2>Welcome to the WYSIWYG Editor</h2>
                <p>This is a <strong>test</strong> of the rich text editor. You can:</p>
                <ul>
                    <li>Format text with <strong>bold</strong>, <em>italic</em>, and <u>underline</u></li>
                    <li>Create headings (H1, H2, H3)</li>
                    <li>Add links and images</li>
                    <li>Create ordered and unordered lists</li>
                </ul>
                <p>Try editing this content to test the editor features!</p>
            </textarea>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Submit Form</button>
            <button type="button" class="btn btn-secondary" onclick="showContent()">Show Content</button>
            <button type="button" class="btn btn-secondary" onclick="clearContent()">Clear</button>
        </div>
    </form>
    
    <div id="output" class="output" style="display: none;">
        <h3>Form Output:</h3>
        <pre id="outputText"></pre>
    </div>
    
    <div id="preview" class="output" style="display: none;">
        <h3>Content Preview:</h3>
        <div id="previewContent"></div>
    </div>
    
    <script src="js/wysiwyg.js"></script>
    <script>
        // Override the default initialization since we're not in the admin context
        document.addEventListener('DOMContentLoaded', () => {
            const editor = new WYSIWYGEditor('content');
            window.wysiwygEditor = editor;
            
            // Handle form submission
            const form = document.getElementById('testForm');
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                showContent();
            });
        });
        
        function showContent() {
            const content = document.getElementById('content').value;
            const title = document.getElementById('title').value;
            
            // Show raw content
            document.getElementById('outputText').textContent = `Title: ${title}\nContent: ${content}`;
            document.getElementById('output').style.display = 'block';
            
            // Show preview
            document.getElementById('previewContent').innerHTML = content;
            document.getElementById('preview').style.display = 'block';
        }
        
        function clearContent() {
            window.wysiwygEditor.setContent('');
            document.getElementById('output').style.display = 'none';
            document.getElementById('preview').style.display = 'none';
        }
    </script>
</body>
</html>