Editor Context Menu

Submitted by EricHolmberg on Sat, 11/17/2007 - 06:31.

I would like to create a context menu and eventually add other widgets to the Editor iframe. I have the following code which properly creates a context menu anywhere on the page that I want. How do I do that for the iframe?

// create a new editor
editor = new dijit.Editor({
jsID: 'editor'
}, dojo.byId(strId));

// create context menu
menu = new dijit.Menu({
contextMenuForWindow : true,
style:"display: none;",
id : "Secondsubmenu1"
}, dojo.byId('???? Which ID goes here????')); // ???? What is the ID of the iframe editor window?

menu.addChild(new dijit.MenuItem({label : "Test Label 1",
onclick : "alert('Test Label 1 clicked');"
}));
menu.addChild(new dijit.MenuItem({label : "Test Label 2",
onclick : "alert('Test Label 1 clicked');"
}));

menu.startup()

Thanks for any help!

-Eric

Login or register to post comments
Subscribe post

Here is the full code and

Submitted by EricHolmberg on Sat, 11/17/2007 - 17:07.

Here is the full code and xhtml for reference.

//<![CDATA[
dojo.require("dojo.parser");
dojo.require("dijit.Menu");// for context menu

// Show the editor
function showEditor(strId){
// create a new editor
editor = new dijit.Editor({
jsID: 'editor'
}, dojo.byId(strId));

// create context menu
menu = new dijit.Menu({
contextMenuForWindow: true,
style: "display: none;",
id: "Secondsubmenu1"
}, dojo.byId('???? Which ID goes here????')); // ???? What is the ID of the iframe editor window?
menu.addChild(new dijit.MenuItem({
label: "Test Label 1",
onclick: "alert('Test Label 1 clicked');"
}));
menu.addChild(new dijit.MenuItem({
label: "Test Label 2",
onclick: "alert('Test Label 1 clicked');"
}));

menu.startup()
}
//]]>

Edit

This is the content for the editor.

After simulating the editor

Submitted by EricHolmberg on Sun, 11/18/2007 - 05:42.

After simulating the editor iframe, I figured out that I needed to add in all of the dojo code as if the iframe is a completely new page (which I believe is actually the root idea of an iframe anyway). So how can I do this for the editor without affecting the content in it? I'm just trying to add some context menus to the editor... Is there a better way?

This works for creating widgets (just a context menu in this case) in an iframe:

Main Document:

<head>
</head>

<body class="tundra" onload="iFrameContentInit();">

<iframe src='/content.html'>iFrame</iframe>
</body>

iFrame Document:

<head>
<style type="text/css">
@import "/dojo/dijit/themes/tundra/tundra.css";
@import "/dojo/dojo/resources/dojo.css";
</style>

<script type="text/javascript" src="/dojo/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false"
>
</script>

<script type="text/javascript">
//<![CDATA[

dojo.require("dojo.parser");
dojo.require("dijit.Menu");

function iFrameContentInit()
{
// create a context menu in the editor
var menu = new dijit.Menu({
contextMenuForWindow : false,
targetNodeIds : ['programContextDiv'],
style:"display: none;",
id : "Secondsubmenu1"
}, dojo.byId('programMenuDiv'));

var item = new dijit.MenuItem({label : "iFrame Test Label 1"
});
item.onClick = function(){
alert('Test Label 1 clicked');
};
menu.addChild(item);
item = new dijit.MenuItem({label : "iFrame Test Label 2"
});
item.onClick = function(){
alert('Test Label 2 clicked');
};
menu.addChild(item);

menu.startup()
}
//]]>
</script>
</head>

<body class="tundra" onload="iFrameContentInit();">
<div id='programContextDiv'>Right click here for context menu</div>
<div id='programMenuDiv' style="display: none;"></div>
</body>

Solved

Submitted by EricHolmberg on Mon, 12/03/2007 - 04:35.

I ended up deriving a new editor class so I could override the _getIframeDocTxt method. This allows me to bypass the standard iframe content format so I can include the iframe contents outlined in my previous post. This isn't complete, as I'll need to add the code to insert/remove style sheets and a few other items. I may do this if I can get the FontChoice and TextColor plugins to work, otherwise I'll probably go with another Javascript editor that has the needed features.

if (!dojo._hasResource["custom.AjaxEditor"]) { //_hasResource checks added by build. Do not use _hasResource directly in your code.
	dojo._hasResource["custom.AjaxEditor"] = true;
	dojo.provide("custom.AjaxEditor");
	dojo.require("dijit.Editor");
	
	// TODO:  add localization
	//dojo.requireLocalization("dijit._editor", "commands", null, "ko,zh,ja,zh-tw,ru,it,hu,fr,pt,pl,es,ROOT,de,cs");
	
	dojo.declare("custom.AjaxEditor",
		dijit.Editor, 
		{
			// summary: A rich-text Editing widget that uses AJAX to retrieve
			// the editing contents
	
			// replace this with your function that retrieves content
			contentFunc : null,
			
			constructor: function() 
			{
			},
	
			// override the RichText::_getIframeDocTxt function to provide
			// content		
			_getIframeDocTxt: function(/* String */html) 
			{
				if ( this.contentFunc != null )
				{
					return this.contentFunc();
				}
				else
				{
					console.debug('Provide a string contentFunc() parameter to set content');
					console.error('custom.AjaxEditor:  No content function specified');
					return "ERROR:  No content function specified";				
				}
			}
		}
	);	
}

Search