View content WYSIWYG?

[xxxmicrobexxx]

Hey there Mark,

Great extra, just installed it for the first time, wish I have found it ages ago.

Without having delved into versionX too much I wonder how useful content versions are for our clients when the content for comparing versions is shown as HTML. Can it be displayed formatted? Or maybe an option for one view or the other (since the change may be just a DIV ID, or something within a tag)?

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/1546921-view-content-wysiwyg?utm_campaign=plugin&utm_content=tracker%2F805489&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F805489&utm_medium=issues&utm_source=github).

[Mark-H]

There's definitely some things we can do in that field.

I'd love to offer several views:

• plain text (as it is now)
• html preview
• code formatted diff view
• etc..

[Engelbert]

In my eyes something like dabblet ( http://dabblet.com/ ) would be super nice. Code view and preview together in one "window". And that twice so we can see the differences between versions in both the code and the preview at the same time.

[amdbuilder]

I would think code highlighting would be more useful than a WYSIWYG interface after all we aren't editing the versions, just viewing them to restore. That being said perhaps a copy version button could be helpful?

[bitwolfe]

This is quite an old one, but I just the other day walked through the restoring of resources with a client, and we discovered it can be quite difficult to compare content versions if something like TinyMCE has cluttered it horribly with pointless font styles.

Some sort of WYSIWYG or HTML preview would be very useful when comparing.

[wuuti]

I would prefer a overall diff view as the default view: show only that data (old and new) which has changed through the versions. E.g. if you go to "Version Details", all data is cluttered across the tabs Version Details, Fields, Content, Template Variables, Page Settings. It would be very useful to have a tab like "Changes" as the default tab, where only the data compared to the previous version is listed. At least/additionally the changed data rows on the mentioned other tabs could be marked/colored somehow to quickly identify what has changed.

[minagerges]

This works perfectly: 1- Replace with below "assets/components/versionx/js/mgr/common/panel.content.js"

Ext.ns('VersionX.panel.Common');
VersionX.panel.Common.ContentPanel = function(config) {
    config = config || {};
    Ext.apply(config,{
        items: [{
            layout: 'column',
            border: false,
            items: [{
                columnWidth: 1,
                layout: 'column',
                border: false,
                defaults: {
                    width: '97%'
                },
                items: [{
                    xtype: 'panel',
                    border: false,
                    style: 'border-bottom: 1px solid black; font-weight: bold;',
                    html: _('versionx.resources.detail.tabs.resource-content.columnheader', {id:config.vxRecord.version_id})
                },{
                    xtype: 'textarea',
                    border: false,
                    style: 'padding: 15px 10px 10px 10px; height: 800px;',
                    html: (config.vxRecord) ? ((config.vxRecord[config.vxContentField]) ? config.vxRecord[config.vxContentField] : '<em>Empty</em>') : '<em>No Version Chosen</em>'
                }]
            }]
        }]
    });
    if ( config.vxRecordCmp ) {
        config.items[0].items[0].columnWidth = .5;
        config.items[0].items.push({
            columnWidth: .5,
            layout: 'column',
            border: false,
            defaults: {
                width: '97%'
            },
            items: [{
                xtype: 'panel',
                border: false,
                style: 'border-bottom: 1px solid black; font-weight: bold;',
                html: _('versionx.resources.detail.tabs.resource-content.columnheader', {id:config.vxRecordCmp.version_id})
            },{
                xtype: 'textarea',
                border: false,
                style: 'padding: 15px 10px 10px 10px; height: 800px;',
                html: (config.vxRecordCmp) ? ((config.vxRecordCmp[config.vxContentField]) ? config.vxRecordCmp[config.vxContentField] : '<em>Empty</em>') : '<em>No Version Chosen</em>'
            }]
        });
    }
    VersionX.panel.Common.ContentPanel.superclass.constructor.call(this,config);
};
Ext.extend(VersionX.panel.Common.ContentPanel,MODx.Panel,{});
Ext.reg('versionx-panel-common-contentpanel',VersionX.panel.Common.ContentPanel);
Ext.onReady(function() { 
    var txtAreas = Array.prototype.slice.call( document.getElementsByTagName('textarea'), 0 );
    txtAreas.forEach(function(t){ MODx.loadRTE(t.id) });
});

2- Prepend below to "core/components/versionx/controllers/index.php"

    $plugin=$modx->getObject('modPlugin',array('name'=>'TinyMCE'));
    $tinyPath = $modx->getOption('core_path').'components/tinymce/';
    $tinyProperties=$plugin->getProperties();
    require_once $tinyPath.'tinymce.class.php';
    $tiny = new TinyMCE($modx, $tinyProperties);
    $tinyProperties['language'] = $modx->getOption('cultureKey',null,$modx->getOption('manager_language',null,'ru'));
    $tinyProperties['cleanup'] = true;
    $tinyProperties['width'] = '100%';
    $tinyProperties['height'] = '800px';
    $tinyProperties['readonly'] = true;
    $tinyProperties['tiny.custom_buttons1'] = '';
    $tinyProperties['tiny.custom_buttons2'] = '';
    $tinyProperties['tiny.custom_buttons3'] = '';
    $tiny->setProperties($tinyProperties);
    $tiny->initialize();

yes .. as simple as that.

To use ACE: 1- Replace the function at the end of the first file with this one

Ext.onReady(function() { 
    var txtAreas = Array.prototype.slice.call( document.getElementsByTagName('textarea'), 0 );
    MODx.ux.Ace.replaceTextAreas(txtAreas, null);
});

2- Modifying the php file can be skipped if you are not planning to use TinyMCE

• Further more System setting can be created and validated by the JS function to initiate the editor accordingly.