Editor

The editor automatically saves content in HTML format within a textarea with the field name set. To get the value you can still use window.editor.getValue('editorID')

1. Simple Editor

<?php echo Get::themePlugin('editor', [
    'id' => 'simpleEditor',
    'label' => 'Description',
    'placeholder' => 'Enter text...',
    'value' => '<p>Initial content</p>'
]); ?>

2. Editor with Events

<?php echo Get::themePlugin('editor', [
    'id' => 'eventEditor',
    'label' => 'Content with Events',
    'onChange' => '(value, event) => {
        document.getElementById("charCount").textContent = "HTML chars: " + value.length;
        document.getElementById("plainTextCount").textContent = "Text chars: " + window.editor.getPlainText("eventEditor").length;
    }',
    'onFocus' => '(event) => {
        document.getElementById("focusStatus").textContent = "Editor active";
    }',
    'onBlur' => '(value, event) => {
        document.getElementById("focusStatus").textContent = "Editor inactive";
    }'
]); ?>

3. Content Manipulation

<?php echo Get::themePlugin('editor', [
    'id' => 'manipulationEditor',
    'label' => 'Editor for Manipulation',
    'value' => '<p>Initial text for manipulation test</p>'
]); ?>

JavaScript API Documentation

The editor plugin exposes its functionality through the global window.editor object.

Main Methods

Method	Description	Example
getValue(containerId)	Gets the current HTML content of the editor	window.editor.getValue('myEditor')
getPlainText(containerId)	Gets content as plain text (without HTML)	window.editor.getPlainText('myEditor')
setValue(containerId, value)	Sets the editor content	window.editor.setValue('myEditor', '<p>New content</p>')
insertText(containerId, text)	Inserts text at cursor position	window.editor.insertText('myEditor', 'Text to insert')
insertHTML(containerId, html)	Inserts HTML at cursor position	window.editor.insertHTML('myEditor', '<strong>Bold text</strong>')
clear(containerId)	Clears the editor completely	window.editor.clear('myEditor')
setEnabled(containerId, enabled)	Enables or disables the editor	window.editor.setEnabled('myEditor', false)

Complete Example

// Create editor via PHP
// <?php echo Get::themePlugin('editor', ['id' => 'myEditor']); ?>

// Get the value
const content = window.editor.getValue('myEditor');

// Insert content
window.editor.insertHTML('myEditor', '<em>Emphasized text</em>');

// Handle events
document.getElementById('saveBtn').onclick = () => {
    const htmlContent = window.editor.getValue('myEditor');
    const textContent = window.editor.getPlainText('myEditor');
    
    console.log('HTML:', htmlContent);
    console.log('Text:', textContent);
    
    // Save to server...
};

WYSIWYG editor based on Trix for formatted content management.