Calling the Editor object from a Popup Window or Modal/Modeless dialog sometimes is required if you’d like to exted the functionality of the Editor, for example if you want to create a custom content insertion from a popup/window dialog.
InnovaStudio WYSIWYG Editor provides a oUtil object with obj property that you can use to call the active Editor object. If you have more than one Editor in a web page, the obj property will return the object of the current selected Editor (where the cursor is placed).
To call the oUtil.obj from a popup window, use:
var oEdit=window.opener.oUtil.obj;
To call the oUtil.obj from a modal/modeless dialog (IE only), use:
var oEdit=dialogArguments.oUtil.obj;
Example use of the oUtil object will be explained in the next sections (Inserting Custom Links & Inserting Custom HTML Content).
InnovaStudio WYSIWYG Editor has a Custom Tag Insertion feature. With this feature, you can insert predefined custom tags into the current Editor content. Custom Tag insertion is a feature that is commonly used in mailing applications or template editing in web content management systems. To use Custom Tag Insertion feature, set arrCustomTag property with an array of your Custom Tags in the form of ["Caption", "Custom Tag"], for example :
<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.arrCustomTag=[["First Name","{%first_name%}"],
["Last Name","{%last_name%}"],
["Email","{%email%}"]];
oEdit1.REPLACE("txtContent");
</script>
InnovaStudio WYSIWYG Editor allows you to insert Custom Links using insertLink() method. With this feature, you can create a functionality to insert 'Internal Links' (links to other documents/files on your server).
The parameters of insertLink() method are: url, title (optional) and target (optional). For example:
oEdit1.insertLink("products.htm","Products","_blank");
This will insert:
<a href="products.htm" target="_blank">Products</a>
If it is applied to a selected text, the result is:
<a href="products.htm" target="_blank">selected text</a>
To create a functionality to insert 'Internal Links' you can create a custom link lookup page.
InnovaStudio WYSIWYG Editor has an optional 'Internal Link' button that can be enabled to call your custom link lookup page in a window/dialog. To enable the button, set the cmdInternalLink property with a command to open your custom link lookup page, for example:
<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.cmdInternalLink="modelessDialogShow(links.asp',365,250)";
oEdit1.REPLACE("txtContent");
</script>
modelessDialogShow() function is a built-in function that you can use to open a web page in a new window dialog. The parameters are: url, dialog width & dialog height.
In the above example we created custom link lookup page named links.htm. In this page you can call the Editor object (using oUtil.obj as explained before) and use insertLink() method to insert links into the current Editor content. Below is a sample Javascript implementation that you can use in links.htm:
<script>
function doInsert(url,title,target)
{
if(navigator.appName.indexOf('Microsoft')!=-1)
{/*For IE browser, use dialogArguments.oUtil.obj
to get the active editor object*/
var oEdit=dialogArguments.oUtil.obj;
oEdit.insertLink(url,title,target);
}
else
{/*For Mozilla browsers, use window.opener.oUtil.obj
to get the active editor object*/
var oEdit=window.opener.oUtil.obj;
oEdit.insertLink(url,title,target);
}
}
</script>
As seen on the code, we created a function doInsert() and then get the Editor object to be able to call the insertLink() method.
InnovaStudio WYSIWYG Editor allows you to insert custom HTML into the current Editor content. For this purpose, use the insertHTML() method. For example, this dropdown will insert custom html content into the Editor:
<select onchange="oUtil.obj.insertHTML(this.value)">
<option value="" selected>Insert..</option>
<option value="<h1>InnovaStudio</h1>">Company Name</option>
<option value="<img src='/images/logo.gif' />">Company Logo</option>
</select>
In the above example, we called the oUtil.obj directly, not using window.opener.oUtil.obj or dialogArguments.oUtil.obj (since it is implemented in the same page where the Editor is embedded, not implemented in a popup/dialog). You can also call the Editor object name directly, for example: oEdit1. However, using oUtil.obj is recommended if you have multiple instances of the Editor since it will refer to the current/active Edtor object (where the cursor is placed).
You can also create a custom lookup page which list your custom html content that can be inserted into the current Editor content. For this purpose, InnovaStudio WYSIWYG Editor has a 'Custom Object' button which can be enabled to open your own custom html Lookup page. To enable the 'Custom Object' button, set the cmdCustomObject property with command to open your custom lookup page :
<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.cmdCustomObject="modelessDialogShow('objects.htm',365,250)";
oEdit1.REPLACE("txtContent");
</script>