Ajax demo

Editors can be displayed and removed from a page dynamically through an AJAX interface.

Integration Code:

<?php
// include wproAjax
include_once('wysiwygPro/wproAjax.class.php');

// load and configure wproAjax
$wproAjax = new wproAjax();

// construct base config
$editor = new wysiwygPro();
$editor->loadPlugin('demoConfig');
$wproAjax->setBaseEditor($editor);

// register all the themes and languages we would like to use:
$wproAjax->addTheme('default');
$wproAjax->addTheme('blue');

$wproAjax->addlanguage('en-us');

// process editor requests, this must be called before any HTML output.
$wproAjax->processRequests();

// print javascript for displaying the editor
$wproAjax->displayHeadContent();

?>

<script type="text/javascript">
function displayEditor1() {

    document.getElementById('ec1').innerHTML = 'Please wait...';

    // id of a div tag to display editor within:
    var div = 'ec1';

    // set any wysiwygPro Properties:
    var properties = new Object();
    properties.name = 'editor1';
    properties.theme = 'blue';
    properties.value = '<p>Hello World</p>';
    properties.width = "100%";
    properties.height = 400;

    // set any wysiwygPro function calls:
    var methods = new Object();
    methods.loadPlugins = [ ['tagPath'] ];

    // display the editor:
    displayWysiwygPro(div, properties, methods, '', '');
}
</script>

<div id="ec1"><!-- editor 1 will be displayed here --></div>
<p>
<input type="button" value="Draw Editor 1" onclick="displayEditor1()" />
<input type="button" value="Delete Editor 1" onclick="WPro.deleteEditor('editor1');" />
</p>

<div id="ec2"><!-- editor 2 will be displayed here --></div>
<p>
<!-- short-hand example: -->
<input type="button" value="Draw Editor 2" onclick="document.getElementById('ec2').innerHTML='Please wait...'; displayWysiwygPro('ec2', {'name':'editor2', 'value':'&lt;p&gt;some html...&lt;/p&gt;', 'theme':'blue', 'width':'100%', 'height':400}, {}, '', '');" />
<input type="button" value="Delete Editor 2" onclick="WPro.deleteEditor('editor2');" />
</p>

We are using a plugin "demoConfig" to apply shared configuration settings such as the file manager configuration.

See the source code for this plugin.

WysiwygPro version 3.3.2