|
|
@@ -1,118 +0,0 @@
|
|
|
-<!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>
|
