AJAX Usage
This topic discusses how to display the editor using AJAX.
Prior knowledge
- You need to have read and understood how to generate an editor the normal way before attempting to display the editor with AJAX. Please see the topic on Basic Usage
- Some knowledge of what AJAX is and some experience using AJAX would help, that is outside the cope of this documentation.
Ajax is a method for sending and retrieving data from the server without re-loading a page. Ajax can be used to load an editor into a page without reloading the entire page. This can be accomplished by using browser native functions such as the XMLHttpRequest object or any 3rd party Ajax library such as JQuery or by using the Ajax functions included with WysiwygPro.
Caution: Remember you cannot have two instances of the editor with the same name so if you will be displaying several editors then you must give each one a unique name. See name.
Some tips
Before displaying the editor you should check that it has not already
been displayed. Simply check that both WPro or
WPro.editors['editorName'] are not defined. e.g.
if (typeof(WPro) == 'undefined' || typeof(WPro.editors[editorName]) == 'undefined') {
// code to display editor here
}
If the editor is already displayed you might instead
want to load some new content into the editor. Use your Ajax library to
retrieve the content you need to load and then call
WPro.editors['editorName']->setValue(myContent); where 'editorName'
is the name of your editor and myContent is the content you just
retrieved using Ajax. See setValue.
Or you could first remove the editor from the page using WPro.deleteEditor('editorName');
Since version 3.1.3 you can remove all editors from the page using WPro.deleteAll();
Using browser native functions (requires version 3.1.3 or better)
The first step is to add wysiwygPro/js/ajaxDisplay.js to the head of the page that will display the editor e.g.
<script src="wysiwygPro/js/ajaxDisplay.js" type="text/javascript"></script>
Then to display WysiwygPro use Ajax to make a request to a PHP script on your server and have that script generate the HTML and JavaScript code for displaying the editor.
You should retrieve the code generated by your PHP script and then make the following script call:
wproAjaxDisplay(editorCode, divID);
Where editorCode is the code for displaying the editor that you retrieved from the server and divID is the ID attribute of an empty DIV tag where you would like the editor displayed.
Example
This is a generic example showing how to make an Ajax request and display the editor without using any helper library.
For the purposes of this example we will create two files, editor.html and editor.php. The HTML file is the page the editor will be displayed on and the PHP file will generate the editor.
editor.html
<html>
<head>
<title>AJAX and WysiwygPro</title>
<!-- Include WysiwygPro's Ajax helper script -->
<script src="../wysiwygPro/js/ajaxDisplay.js" type="text/javascript"></script>
<script type="text/javascript">
/* function for displaying the editor */
function displayEditor(ID, editorName) {
/* check if the editor has already been displayed */
if (typeof(WPro) == 'undefined' || typeof(WPro.editors[editorName]) == 'undefined') {
/* create an Ajax request object */
var ajax = window.ActiveXObject ? new ActiveXObject('Msxml2.XMLHTTP') || new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
/* Pass the editor name to editor.php using get and retrieve the contents, you could pass other parameters too */
ajax.overrideMimeType && ajax.overrideMimeType('text/plain');
ajax.open("GET", 'editor.php?name='+editorName, false);
ajax.send(null);
/* activate the editor */
wproAjaxDisplay(ajax.responseText, ID);
}
}
</script>
</head>
<body>
<div id="editorHolder"><a href="javascript:displayEditor('editorHolder', 'test');">Display Editor</a></div>
<div id="editorHolder2"><a href="javascript:displayEditor('editorHolder2', 'test2');">Display Editor</a></div>
</body>
</html>
editor.php
<?php
// Include the WysiwygPro script file:
include_once('wysiwygPro/wysiwygPro.class.php');
// Create a new editor object:
$editor = new wysiwygPro();
// Give the editor a name (equivalent to the name attribute on a regular textarea):
$editor->name = $_GET['name'];
// Set some HTML code to edit:
$editor->value = '<p>This is the HTML code I want to edit</p>';
// Display the editor:
$editor->display('100%', 400);
?>
Using a 3rd party library (requires version 3.1.3 or better)
If you are using an Ajax library such as JQuery that can dynamically load JavaScript in an Ajax request then you may use the method described here.
Use your favorite Ajax library
to make a request to a PHP script on your server and
have that script generate the HTML and JavaScript code for displaying
the editor (if you need to output the code as JSON then you can use the fetch method to retrieve the HTML and JavaScript code and then JSON encode that using PHP's json_encode function). Use your Ajax library to set the contents of an empty DIV tag to the HTML and JavaScript you just retrieved from your PHP script.
If using your Ajax library to set the contents of the DIV tag does not work then you will instead need to add wysiwygPro/js/ajaxDisplay.js to the head of your document and call wproAjaxDisplay(editorCode, divID); as described in the section above. The reason for this is that some libraries may not execute the JavaScript and CSS tags in the code.
Example
Using JQuery (this example was tested using JQuery 1.3.1 with WP 3.1.3)
For the purposes of this example we will create two files, editor.html and editor.php. The HTML file is the page the editor will be displayed on and the PHP file will generate the editor.
In this example we will use JQuery's load method to load the editor into a DIV tag. Using this method we do no need to include wysiwygPro/js/ajaxDisplay.js or use wproAjaxDisplay because JQuery's load function will load the HTML and JavaScript into the DIV tag and execute the JavaScript and CSS.
editor.html
<html>
<head>
<title>JQuery and WysiwygPro</title>
<!-- Include JQuery -->
<script src="jquery.js" type="text/javascript" type="text/javascript"></script>
<script type="text/javascript">
/* function for displaying the editor */
function displayEditor(ID, editorName) {
/* check if the editor has already been displayed */
if (typeof(WPro) == 'undefined' || typeof(WPro.editors[editorName]) == 'undefined') {
/*
Use JQuery's load function to load the contents displayed by editor.php into a DIV
We are using the second parameter to pass the name we want to
give the editor to editor.php using GET, you could pass other
paramaters too.
*/
$("#"+ID).load("editor.php", "name="+editorName);
}
}
</script>
</head>
<body>
<div id="editorHolder"><a
href="javascript:displayEditor('editorHolder', 'test');">Display
Editor</a></div>
<div id="editorHolder2"><a
href="javascript:displayEditor('editorHolder2', 'test2');">Display
Editor</a></div>
</body>
</html>
editor.php
<?php
// Include the WysiwygPro script file:
include_once('wysiwygPro/wysiwygPro.class.php');
// Create a new editor object:
$editor = new wysiwygPro();
// Give the editor a name (equivalent to the name attribute on a regular textarea):
$editor->name = $_GET['name'];
// Set some HTML code to edit:
$editor->value = '<p>This is the HTML code I want to edit</p>';
// Display the editor:
$editor->display('100%', 400);
?>
Using wproAjax
Please see the AJAX example in your Examples folder and/or the example here: http://www.wysiwygpro.com/index.php?id=445
Further documentation will be available on this page in the future.
Contents
This online documentation specifically covers version 3.0 and above, developers using earlier versions should refer to their PDF or MS-Word manual that was included in the product download.