Modify wysiwyg -editor

css/wysiwyg.css

@@ -697,3 +697,34 @@
     max-width: 100%;
     height: auto;
 }
+
+/* Raw Edit Mode */
+.wysiwyg-raw-textarea {
+    width: 100%;
+    min-height: 400px;
+    padding: 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    resize: vertical;
+    background-color: #f8f9fa;
+    color: #333;
+}
+
+.wysiwyg-raw-toggle {
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.wysiwyg-raw-toggle.active {
+    background-color: #007bff !important;
+    color: white !important;
+}
+
+.wysiwyg-raw-toggle:hover {
+    background-color: #0056b3 !important;
+    color: white !important;
+}

js/wysiwyg.js

@@ -16,6 +16,8 @@ class WYSIWYGEditor {
         this.resizingImage = null;
         this.resizeData = null;
         this.aspectRatioLocked = true;
+        this.isRawMode = false;
+        this.rawTextarea = null;
         
         this.createEditor();
         this.bindEvents();
@@ -38,6 +40,11 @@ class WYSIWYGEditor {
         this.content.className = 'wysiwyg-content';
         this.content.contentEditable = true;
         
+        // Create raw textarea
+        this.rawTextarea = document.createElement('textarea');
+        this.rawTextarea.className = 'wysiwyg-raw-textarea';
+        this.rawTextarea.style.display = 'none'; // Hidden by default
+        
         // Create character count
         this.charCount = document.createElement('div');
         this.charCount.className = 'wysiwyg-char-count';
@@ -45,6 +52,7 @@ class WYSIWYGEditor {
         // Assemble editor
         this.container.appendChild(this.toolbar);
         this.container.appendChild(this.content);
+        this.container.appendChild(this.rawTextarea);
         this.container.appendChild(this.charCount);
         
         // Replace textarea
@@ -73,6 +81,15 @@ class WYSIWYGEditor {
                 this.toolbar.appendChild(button);
             }
         });
+        
+        // Add raw edit toggle button
+        const rawToggle = document.createElement('button');
+        rawToggle.className = 'wysiwyg-btn wysiwyg-raw-toggle';
+        rawToggle.type = 'button';
+        rawToggle.innerHTML = '</>';
+        rawToggle.title = 'Toggle Raw HTML Edit';
+        rawToggle.addEventListener('click', () => this.toggleRawMode());
+        this.toolbar.appendChild(rawToggle);
     }
     
     getButtonLabel(command) {
@@ -301,6 +318,69 @@ class WYSIWYGEditor {
         return this.insertSelectedImages();
     }
     
+    toggleRawMode() {
+        this.isRawMode = !this.isRawMode;
+        
+        if (this.isRawMode) {
+            // Switch to raw mode
+            this.syncToRaw();
+            this.content.style.display = 'none';
+            this.rawTextarea.style.display = 'block';
+            this.rawTextarea.focus();
+            
+            // Update button state
+            const rawToggle = this.container.querySelector('.wysiwyg-raw-toggle');
+            if (rawToggle) {
+                rawToggle.classList.add('active');
+                rawToggle.style.backgroundColor = '#007bff';
+                rawToggle.style.color = 'white';
+            }
+            
+            // Disable toolbar buttons (except raw toggle)
+            this.disableToolbar(true);
+        } else {
+            // Switch to visual mode
+            this.syncToVisual();
+            this.rawTextarea.style.display = 'none';
+            this.content.style.display = 'block';
+            this.content.focus();
+            
+            // Update button state
+            const rawToggle = this.container.querySelector('.wysiwyg-raw-toggle');
+            if (rawToggle) {
+                rawToggle.classList.remove('active');
+                rawToggle.style.backgroundColor = '';
+                rawToggle.style.color = '';
+            }
+            
+            // Enable toolbar buttons
+            this.disableToolbar(false);
+        }
+    }
+    
+    syncToRaw() {
+        // Sync visual content to raw textarea
+        this.rawTextarea.value = this.content.innerHTML;
+        this.textarea.value = this.content.innerHTML;
+    }
+    
+    syncToVisual() {
+        // Sync raw textarea to visual content
+        const rawContent = this.rawTextarea.value;
+        this.content.innerHTML = rawContent;
+        this.textarea.value = rawContent;
+        this.updateCharCount();
+    }
+    
+    disableToolbar(disable) {
+        const buttons = this.toolbar.querySelectorAll('.wysiwyg-btn:not(.wysiwyg-raw-toggle)');
+        buttons.forEach(button => {
+            button.disabled = disable;
+            button.style.opacity = disable ? '0.5' : '1';
+            button.style.cursor = disable ? 'not-allowed' : 'pointer';
+        });
+    }
+    
     async deleteImage(imageId, event) {
         event.stopPropagation(); // Prevent image selection