Feature: More options in the system settings grid

[enigmatic-user]

Apart from http://github.com/splittingred/TinyMCE/issues/closed#issue/14 (thank you very much for implementing this at the speed of light!), there are some more TinyMCE options that I'd like to have control over via the MODx system settings. Setting them in the configuration files directly wouldn't be of great value because I'd have to reapply them after every update.

For now, I implemented the following settings:

• skin: There are some skins delivered with TinyMCE, but there's no way to choose them.
• skin_variant: Some skins have additional variants (cirkuit: silver, o2k7: black, silver).
• object_resizing: I'd like to prevent images and tables from being resized in Firefox/Mozilla.
• table_inline_editing: I'd like to turn off the inline table editing controls in Firefox/Mozilla.
• template_selected_content_classes: Template plugin: Any template element with one of the specified CSS classes will have its content replaced by the selected editor content when first inserted.

This is what has to be done:

/core/components/tinymce/tinymce.class.php

    /* now do user/context/system setting overrides - these must override properties */
    $this->properties = array_merge($this->properties,array(

    [...]

        // These lines have to be added, e. g. starting at line 109
        'skin' => $this->modx->getOption('tiny.skin',$this->properties,''),
        'skin_variant' => $this->modx->getOption('tiny.skin_variant',$this->properties,''),
        'object_resizing' => $this->modx->getOption('tiny.object_resizing',$this->properties,true),
        'table_inline_editing' => $this->modx->getOption('tiny.table_inline_editing',$this->properties,true),
        'template_selected_content_classes' => $this->modx->getOption('tiny.template_selected_content_classes',$this->properties,''),
    ));

/assets/components/tinymce/tinymce.panel.js

Tiny.Editor = function(config) {
    config = config || {};
    config.tinyConfig = config.tinyConfig || Tiny.config;
    config.tinyConfig = config.tinyConfig || {};
    Ext.applyIf(config.tinyConfig,{
        setup: (function(ed) {
            ed.onInit.add(this.onLoad);
            ed.onKeyUp.add(this.onChange);
        }).createDelegate(this)

        [...]

        // These lines have to be added, e. g. starting at line 62
        ,skin: MODx.config['tiny.skin']
        ,skin_variant: MODx.config['tiny.skin_variant']
        ,object_resizing: MODx.config['tiny.object_resizing'] || true
        ,table_inline_editing: MODx.config['tiny.table_inline_editing'] || true
        ,template_selected_content_classes: MODx.config['tiny.template_selected_content_classes']
    });

/core/components/tinymce/lexicon/en/default.inc.php

// Add these lines:
$_lang['setting_tiny.skin'] = 'TinyMCE Skin';
$_lang['setting_tiny.skin_desc'] = 'The skin used for the TinyMCE editor. Default is "cirkuit" for the advanced theme, also supplied are "default" and "o2k7".';
$_lang['setting_tiny.skin_variant'] = 'TinyMCE Skin Variant';
$_lang['setting_tiny.skin_variant_desc'] = 'Some skins have several variants from which you can choose. For the skin "cirkuit" there\'s the variant "silver", for the skin "o2k7" there are the variants "black" and "silver". Default ist the empty string.';
$_lang['setting_tiny.object_resizing'] = 'Object Resizing';
$_lang['setting_tiny.object_resizing_desc'] = 'This option gives you the ability to turn on/off the inline resizing controls of tables and images in Firefox/Mozilla. These are enabled by default.';
$_lang['setting_tiny.table_inline_editing'] = 'Table Inline Editing';
$_lang['setting_tiny.table_inline_editing_desc'] = 'This option gives you the ability to turn on/off the inline table editing controls in Firefox/Mozilla. According to the TinyMCE documentation, these controls are somewhat buggy and not redesignable, so they are disabled by default.';
$_lang['setting_tiny.template_selected_content_classes'] = 'Template Selected Content Classes';
$_lang['setting_tiny.template_selected_content_classes_desc'] = 'Specify a list of CSS class names for the template plugin. They must be separated by spaces. Any template element with one of the specified CSS classes will have its content replaced by the selected editor content when first inserted.';

/core/components/tinymce/lexicon/de/default.inc.php

// Add these lines:
$_lang['setting_tiny.skin'] = 'TinyMCE-Skin';
$_lang['setting_tiny.skin_desc'] = 'Der für den TinyMCE-Editor verwendete Skin. Standardmäßig ist für das Theme "advanced" der Skin "cirkuit" eingestellt; die Skins "default" und "o2k7" werden ebenfalls mitgeliefert.';
$_lang['setting_tiny.skin_variant'] = 'TinyMCE-Skin-Variante';
$_lang['setting_tiny.skin_variant_desc'] = 'Einige Skins haben eine oder mehrere zusätzliche Varianten, die man auswählen kann. Der Skin "cirkuit" besitzt die zusätzliche Variante "silver", für den Skin "o2k7" stehen die zusätzlichen Varianten "black" und "silver" zur Verfügung. Standardmäßig ist diese Einstellung leer.';
$_lang['setting_tiny.object_resizing'] = 'Objekt-Größenänderung im Editor';
$_lang['setting_tiny.object_resizing_desc'] = 'Diese Option gibt Ihnen die Möglichkeit, die Größenänderungs-Kontrollelemente von Tabellen und Bildern in Firefox/Mozilla ein- und auszuschalten. Standardmäßig sind diese eingeschaltet.';
$_lang['setting_tiny.table_inline_editing'] = 'Tabellen-Bearbeitung';
$_lang['setting_tiny.table_inline_editing_desc'] = 'Diese Option gibt Ihnen die Möglichkeit, die Kontrollelemente für die Inline-Bearbeitung von Tabellen in Firefox/Mozilla ein- und auszuschalten. Laut der TinyMCE-Dokumentation sind diese Kontrollelemente nicht ganz fehlerfrei und nicht änderbar, daher sind sie standardmäßig deaktiviert.';
$_lang['setting_tiny.template_selected_content_classes'] = 'Template-CSS-Klassen für markierte Inhalte';
$_lang['setting_tiny.template_selected_content_classes_desc'] = 'Geben Sie eine Liste von CSS-Klassennamen für das Template-Plugin ein. Die Einträge müssen durch Leerzeichen getrennt sein. Der Inhalt jedes Vorlagen-Elements mit einer der angegebenen CSS-Klassen wird durch die im Editor markierten Inhalte ersetzt, wenn die Vorlage eingefügt wird.';

(Same for the other languages)

Database entries in table system_settings

key:       tiny.skin
value:     cirkuit
xtype:     textfield
namespace: tinymce
area:      tinymce

key:       tiny.skin_variant
value:     
xtype:     textfield
namespace: tinymce
area:      tinymce

key:       tiny.object_resizing
value:     1
xtype:     combo-boolean
namespace: tinymce
area:      tinymce

key:       tiny.table_inline_editing
value:     0
           (The MODx default for this is 1, but according to the TinyMCE documentation, these controls are somewhat buggy and not redesignable, so they are disabled by default in TinyMCE.)
xtype:     combo-boolean
namespace: tinymce
area:      tinymce

key:       tiny.template_selected_content_classes
value:     
xtype:     textfield
namespace: tinymce
area:      tinymce

I guess it would also make sense to split the tinymce namespace into two areas, one for the TinyMCE UI and one for settings that affect the behavior of the editor. The second area could contain the settings

• tiny.object_resizing
• tiny.path_options (?)
• tiny.object_resizing
• tiny.table_inline_editing
• tiny.template_selected_content_classes

  There are some more options I'd like to see in the MODx system settings:

• dialog_type
• fix_table_elements
• fix_nesting
• forced_root_block
• indentation
• invalid_elements
• font_size_classes
• font_size_style_values
• theme_advanced_font_sizes
• theme_advanced_text_colors
• theme_advanced_background_colors
• style_formats
• verify_css_classes (?)
• removeformat_selector (?)

If it's okay for you to implement these settings, I'd be happy to prepare them for you the way I did it here. Please tell me if it's okay for you.

Some additional remarks:

• The xtype for tiny.template_list should be "textarea". Adding several templates with name, path and description is quite difficult in a single line.
• tiny.editor_theme contained the value "Editor" in my MODx installation. This could be because I'm using it since very early Revolution versions (Alpha), but I'm not sure. It should contain "advanced", of course - it just worked because "advanced" is the default value.

I guess that's it for the moment. :D I'd be very happy if these things could be implemented in the official TinyMCE package.

[gadamiak]

Would that be possible to enable all original TinyMCE settings? To future-proof them would that be possible to hotlink settings from plugin properties into plugin configuration JS file (or sth similar nor requiring to add them all to plugin code)?