Develop Reference

Ext.net TabPanel issue

I'm experiencing an issue with Ext.net TabPanel. When the page with tab panel is opened first time after the app was rebuilt it throws Uncaught TypeError: Object [object Object] has no method 'getComponent'. The problem happens each time the application is rebuilt and then disappears after page refresh. Here's JS code I use to create a tab:
#X.XScript().ScriptBlock(#"
<script>
var addMainTab = function (tabPanel, id, url, title) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id : id,
title : title,
closable : true,
loader : {
url : url,
renderer : 'frame',
loadMask : {
showMask : true,
msg : 'Loading ' + url + '...'
}
}
});
}
tabPanel.setActiveTab(tab);
}
</script>
");
It's called on menu item click:
menuItem.Listeners.Click.Handler = "addMainTab(#{MainTabPanel}, 'someId', 'someurl', 'Tab title')";
As I figured out some functions (getComponent, addTab and others) are not included into the definition of TabPanel at first load of the page after rebuild. Does anyone have any idea why it may happen and how it can be fixed? I'd appreciate any help.

Don't use #{control} name in Razor code. Use App.ControlNameHere to reference the object in question. #{control} is only used in webforms.

Does the ExtJS framework files get loaded before this code is executed?

take a look at this question ,which I mentioned how I add tab panel to the main page.

CKEditor: call a plugin function without toolbar button

How can I call a plugin function without a toolbar button?
I have an external floating toolbar integrated in my cms. I insert images, videos and other pieces of static code with the InsertHTML() API of CKEditor.
Now I need to insert also video from URL, and there is the fantastic oembed plugin. How can I fire that plugin using a button in my cms without the toolbar button?
I load the plugin in my config, and I try to create this function:
function oembed() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var url = 'http://www.youtube.com/watch?v=AQmbsmT12SE'
var wrapperHtml = jQuery('<div />').append(editor.config.oembed_WrapperClass != null ? '<div class="' + editor.config.oembed_WrapperClass + '" />' : '<div />');
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Insert HTML code.
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
editor.embedCode(url, editor, false, wrapperHtml, 650, 400, false);
}
else
alert( 'You must be in WYSIWYG mode!' );
}
The result is this:
Uncaught TypeError: Object [object Object] has no method 'embedCode'
Is there any way to create a new API like "InsertHTML" to call plugin functions without toolsbar buttons?
EDIT
Maybe I can use the createFakeElement API.
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-createFakeElement
I add the class fakegallery to my doc.
I use this code but nothing happens:
function Fake()
{
var editor = CKEDITOR.instances.editor1;
var element = CKEDITOR.dom.element.createFromHtml( '<div class="bold"><b>Example</b></div>' );
alert( element.getOuterHtml() );
editor.createFakeElement( element, 'fakegallery', 'div', false );
}

I found this post looking for the answer...
Checked out the link provided in the answers here [ http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-fire ], scrolled down to execCommand
This worked for me and only requires that you know the name of your plugin, so it'll always work. Obviously, you may need to change "editable" to your editor instance.
CKEDITOR.instances['editable'].execCommand('YOUR_PLUGIN_NAME_HERE');
If above fails, HACK:
This would work (first line of code below), but requires you to look at the source to find the correct #. If you have 1 custom plugin, no big deal. But if you have a dozen or more, like me, this is annoying, and could change as more plugins are added.
CKEDITOR.tools.callFunction(145,this);
Hope this helps!

Read this:
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-fire
editor.fire( 'MediaEmbed', data);
I think that this is the structure that your data needs to have:
var data = {title : 'Embed Media',
minWidth : 550,
minHeight : 200,
contents :
[
{
id : 'iframe',
expand : true,
elements :[{
id : 'embedArea',
type : 'textarea',
label : 'Paste Embed Code Here',
'autofocus':'autofocus',
setup: function(element){
},
commit: function(element){
}
}]
}
]}
I'm not secure but this will help you on the way.
Look at the Source code of the plugin to find the available commands.
The command name that i specified above is the only one that your plugin haves.
EDIT - Manual inserting
var div = editor.document.createElement('div');
div.setHtml("<embed src=" + url +" width=" + width +" height=" + height + ">");
editor.insertElement(div);
You can add every attribute you like, Type?? maby? Autofocus??

Custom context menu in Firefox with Add-on SDK?

I wish to add a single menu item to the firefox context menu that shows up
only if the user right-clicks a specific url. I have a function to test the url.
I used to do this by subscribing to "popupshowing" event and:
var item = document.getElementById("custom-menu-id");
if (item) // show only for specific links
item.hidden = gContextMenu.onLink && acceptableURL(gContextMenu.linkURL);
I'm trying now to use the Add-on SDK, but there I no longer have access to gContextMenu.
This snippet from the documentation doesn't work for me:
var cm = require("sdk/context-menu");
cm.Item({
label: "Copy name to clipboard",
context: cm.URLContext("http://scholar.google*"),
contentScript: 'self.on("context", function(node) {return true; });'
});
Here I'd think that it should be possible to get something like node.URL and test that,
but it doesn't work. Maybe someone could suggest either how to get access to gContextMenu from the sdk or how to get URL from node or something else.

This code should only show the menu item when right-clicking on links directed at stackoverflow.com:
In your main module main.js:
exports.main = function() {
require("sdk/context-menu").Item({
label: "stack overflow link",
context: require("sdk/context-menu").SelectorContext("a[href]"),
contentScriptFile: require("sdk/self").data.url("check-node.js"),
onMessage: function(msg){},
});
};
In your content script (or content script file; in this case, check-node.js):
self.on("click",function(node,data){
self.postMessage("click");
});
self.on("context", function(node){
if(node.href && node.href.match(/^https?:\/\/(\w+\.)*stackoverflow\.com(\/.*)?$/))return true; //show in context menu if return value is true.
});
Re: Your sample code. You have URLContext which determines what pages your menu items show up on and this snippet self.on("context", function(node) {return true; }); causes the menu item to always show when URLContext conditions are met. Use SelectorContext instead. And test the node.href as shown above, returning true only if you want the menu item to show.

Modify CKEditor link dialog to add custom attribute to links

I am using CKEditor on a website and I need to be able to put a special data attributes on some of the links created through the editor. The user would indicate that they need the special attribute put on the link by checking a checkbox in the link dialog. I have managed to add a checkbox to the link dialog with the following code:
CKEDITOR.on('dialogDefinition', function(ev) {
if (ev.data.name == "link") {
var info = dialog.getContents("info");
info.elements.push({
type: "vbox",
id: "urlOptions",
children: [{
type: "hbox",
children: [{
id: "button",
type: "checkbox",
label: "Button",
commit: function(data) {
data.button = this.getValue()
console.log("commit", data.button, data);
},
setup: function(data) {
this.setValue(data.button);
console.log("setup", data.button, data);
}
}]
}]
});
}
});
Now I have two problems. The first one is that despite me adding the code in the commit and setup functions that should save the state of the checkbox, it's not working. It's as if the data can't hold any other parameters but the ones there by default.
The second problem is that I don't know how to add / remove the data attribute on my links. It seems to me that I should be doing that in my onOk callback on the dialog, however, the link dialog already has an onOk callback, so I'm not sure how I should be proceeding. I, of course, do not want to modify any of CKEditor's files directly.
How can I accomplish these things?

You best option is to modify the plugin. So you need to open the source code and find the file links.js in c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\
The source code is quite big (40k) but here you can modify the dialog however you want. When you finish just copy it to your plugins folder, and compress it: http://jscompress.com/
I have done what you need myself. The whole uncompressed file is here: https://gist.github.com/3940239
What you need to do:
First add this line just before the dialog "browse" button is appended. Approx. in line: 547:
{
id: "button",
type: "checkbox",
label: "Button",
setup: function (data) {
this.allowOnChange = false;
if (data.button)
this.setValue(data.button);
this.allowOnChange = true;
},
commit: function (data) {
data.button = this.getValue()
this.allowOnChange = false;
}
},
This part is actually your code. I just copied and pasted it.
Then, go to the onOk function, approx. in line 1211: and after commitContent add this code:
this.commitContent( data );
//My custom attribute
if (data.button)
attributes["custom-attribute"] = "button";
else
attributes["custom-attribute"] = "";
This will modify your link adding the attribute to the element such as text
That's it. Although, you may also like to load the current status of the checkbox. Then, go to the function parseLink . Approx. line 179 to load the attributes:
...
if ( element )
{
retval.button = element.getAttribute('custom-attribute');
var target = element.getAttribute( 'target' );
...

I am exploring the same thing now. What I have decided to do at this point is to:
Get a base ckeditor install without the link plugin
create my own fork of the link plugin, and add my changes to it, then activate and use this plugin within the group that link normally shows up in.
...working with it as a custom plugin (albeit a copy of the original) should alleviate the problem of upgrading. You just simply do not use the original link plugin at all. Copy and rename it, and use your custom copy instead.

Radio button list using Javascript with each list choice returning custom text

I am making a custom TinyMCE button for Wordpress, part of the Javascript code looks like this:
(function() {
tinymce.create('tinymce.plugins.Green', {
init : function(ed, url) {
ed.addButton('green', {
title : 'Prompt Text',
image : url+'/images/btn_green.jpg',
onclick : function() {
var prompt_text = prompt("Green Button", "Green Button Text");
var caret = "caret_pos_holder";
var insert = "<div>" + prompt_text + "</div><span id="+caret+"></span>";
if (prompt_text != null && prompt_text != 'undefined')
{
ed.execCommand('mceInsertContent', false, insert);
ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span
}
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('green', tinymce.plugins.Green);
})();
I want to remove the prompt_text function and add a radio button list where a window appears and the user can select one of the options in the list. And each list item should have their unique insert. How is this possible?
For instance, the window should have a list of three options: Tea, Coffee, Water.
If the user selects Coffee, it should insert the text: Coffee wakes you up.
My knowledge of Javascript is very limited which is stopping me from solving this. However, I would presume that this is only possible by creating a jQuery form?

For this you will need to write an own plugin.
You should take a look at the developer tinymce build and have a look at the source code, especially the searchreplace plugin. This plugin uses a tinymce popup and the user is able to select several settings. I suggest you copy that plugin, adjust it to your needs and remove all the stuff you don't need.