AJAX Demo
Ajax demo
Editors can be displayed and removed from a page dynamically through an AJAX interface.
Source code:
<?php
// include wproAjax
include_once(dirname(__FILE__).'/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.iframeDialogs = true;
properties.value = '<p>Hello World</p>';
// 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':'<p>some html...</p>', 'theme':'blue', 'width':700, '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.2.1