1 Topic by hal

(1 replies, posted in Tips, Tricks & HowTo's)

I have a complex page that includes a tinyMce editor and some components from Blueshoes. However, whenever you click into the tinymce textarea I get a number of errors: 'instance.contentWindow has no properties' on line 951:

    946       case "focus":
    947             // Check instance event trigged on
    948             var targetBody = tinyMCE.getParentElement(e.target, "body");
    949             for (var instanceName in tinyMCE.instances) {
    950                 var instance = tinyMCE.instances[instanceName];
    951                 if (instance.contentWindow.document.body == targetBody) {
    952                     tinyMCE.selectedInstance = instance;
    953                     tinyMCE.selectedElement = e.target;
    954                     tinyMCE.linkElement = tinyMCE.getParentElement(tinyMCE.selectedElement, "a");
    955                     tinyMCE.imgElement = tinyMCE.getParentElement(tinyMCE.selectedElement, "img");
    956 
    957                     // Reset design mode if lost
    958                     instance.autoResetDesignMode();
    959 
    960                     // Reset typing
    961                     tinyMCE.selectedInstance.typing = false;
    962                     break;
    963                 }
    964             }

This occurs in both Internet Explorer and Mozilla Firefox, but prevents tinymce in IE from working at all.
Firefox seems to ignore the error and continue as normal. If I modify the above source to prevent the error using if ((instance.contentWindow) && then the page will load in IE without a problem, but functionality is not 100% as obviously this code is not being run.

I have an example page to demonstrate the problem. The inline Javascript comes from a file core/lang/Bs_Array.class.js from the drop down selector available at: http://www.blueshoes.org/ -> http://www.blueshoes.org/en/javascript/dropdown/

The example page:

<!-- tinyMCE --> 
<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce_src.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        theme : "default",
        mode : "exact",
        elements : "description"
    });
</script>
<!-- /tinyMCE -->

<form name="frmProduct">
<textarea name="description" id="description" style="height: 300; width: 500"></textarea>
</form>

<script language="Javascript">
/********************************************************************************************
* BlueShoes Framework; This file is part of the php application framework.
* NOTE: This code is stripped (obfuscated). To get the clean documented code goto 
*       www.blueshoes.org and register for the free open source *DEVELOPER* version or 
*       buy the commercial version.
*       
*       In case you've already got the developer version, then this is one of the few 
*       packages/classes that is only available to *PAYING* customers.
*       To get it go to www.blueshoes.org and buy a commercial version.
* 
* @copyright www.blueshoes.org
* @author    Samuel Blume <sam at blueshoes dot org>
* @author    Andrej Arn <andrej at blueshoes dot org>
*/
Array.prototype.moveUp = function(key) {
if (key == 0) return this;if (key >= (this.length)) return this;if (key > 1) {
var newArr = this.slice(0, key -1);} else {
var newArr = new Array;}
newArr[newArr.length] = this[key];newArr[newArr.length] = this[key -1];var endArr = this.slice(key +1, this.length);return newArr.concat(endArr);}

// The rest of the file has been removed as it is irrelevant for thie case

</script>

I appreciate you cannot support every other piece of javascript interoperating with tinymce without any problems. But if you could please provide me with some information on how to handle this conflict it would be most appreciated. In the above example, if you comment out the function the error no longer appears, so it is very obviously the function definition that causes the problem.

So my question really is, how can I modify the above code or tinymce for both pieces of javascript to work as expected but independently of each other? Are there any general principles that can be applied to any other javascript code to ensure they don't cause problems when working with tinymce?

Thankyou for a fantastic, no fuss, WYSWIWYG editor. After trying many others I really appreciate the work you have put into this.

Go to forum: Tips, Tricks & HowTo's