#
# TinyMCE
#

https://www.tiny.cloud/get-tiny/self-hosted/


// RESIZE ISSUE

-We must add custom code to scriptaculous to prevent resizing the MCE editor from 
activating its drag and drop, which causes the editor to float around the screen.

dragdrop.js

updateDrag: function(event, pointer) {
	// RackForms - Build 709 - Prevent Extra Drag Logic For MCE Items
	if(AF._tinyMCE_Custom.resizeActive == true){
		this.endDrag(event);
		return;
	}

Note this relies on: _tinyMCE_Custom.resizeActive

Which comes from:

/** 
 * Build 709 - We now set a custom property: AF._tinyMCE_Custom container
 * so that any additional logic we need to add is handled in one place.
 */

function init_custom_MCE(){
	// Build 709 - Custom container for properties
	AF._tinyMCE_Custom = [];
	AF._tinyMCE_Custom.resizeActive = false;
};


This is called from the main init function as:

// Build 709 - Custom setup function for any special cases MCE needs to run.
// Right now we just have one, which is the flag we use to see if we are resizing an MCE window.
// In the future, we can use this is to manage MCE settings, such as setting custom properties for window resize.
init_custom_MCE();


The core logic in MCE was contained in:

rackforms\app\js\tinymce_3.4.2\tinymce\jscripts\tiny_mce\themes\advanced\editor_template.js

In MCE 4 it appears that we have a similar call in:

rackforms\app\js\tinymce_4.0.20\tinymce\js\tinymce\themes\modern\theme.min.js


However, this does not tell us when the drag starts and stops, so we cannot use it.

Thus, we now back off of this approach and use a simpler method: 

In the updateDrag method we simply check for the div have a specific opacity, as well as being empty:

    if(typeof(event.element().getStyle('opacity')) != "undefined"){
        if (event.element().innerHTML == "") {
            //console.log("MCE Drag");
            this.endDrag(event);
            return;
        }
    }



// PHP CODE ISSUE

TinyMCE rewrites PHP code:

<?php echo 'sample'; ?>

Becomes:

<br /><!--?php echo 'sample'; ?-->

We'll hook into events to fix this, but the exact event is the key.

When we create a dynamic editor we run: BeforeRenderUI > BeforeSetContent 
When we close a dynamic editor we run: PostProcess > BeforeSetContent > BeforeExecCommand

When we enter the HTML editor we run: PostProcess > BeforeSetContent > BeforeExecCommand
When we leave the HTML editor we run: BeforeSetContent > BeforeExecCommand


In each case BeforeSetContent is run before we display or save content.

So: can we grab content



// STYLE CHANGES

skin.min.css
	
	.mce-panel{border:0 solid #d2d2d2 < from darker to lighter
	.mce-container, < font size to 12px;