Remove a ckeditor dialog registration - ckeditor

How do I prevent a builtin dialog from showing up? For example, let's say I want to prevent the link dialog from showing up to limit what my users can do with links.

Hmm I think I found the answer to my question: just replace the existing with a new registration:
editor.addCommand('link', {
exec: function (editor) {
alert('Boo!');
}
});
Let me know if there's a better way to do this.

For example, let's say I want to prevent the link dialog from showing up to limit what my users can do with links.
CKEDITOR.editorConfig = function( config ) { config.removeDialogTabs = 'link:target;link:upload;link:advanced'; };
See also removeDialogTabs.

Related

How to validate user content on real time with ckeditor's accessibility checker?

I am new in using ckeditor and its API. I would like to find a way to validate the content of the users through the accessibility checker while they are typing.
The information available in the documentation do not make clear how to do this.
I'm trying to figure out how to do this...
<script>
var instance = CKEDITOR.replace('editorck');
instance.on('focus', function(event) {
var editor = CKEDITOR.instances['editorck'];
if(editor.plugins.a11ychecker){
var a11ycheckerCommand = new CKEDITOR.command(editor, {
exec: function( editor ) {
editor.execCommand("a11ychecker");
}
});
a11ycheckerCommand.setState(CKEDITOR.TRISTATE_ON);
a11ycheckerCommand.exec(editor);
}
});
instance.on('key', function (event) {
var editor = CKEDITOR.instances['editorck'];
editor.execCommand("a11ychecker.listen");
});
</script>
The code above expects two events. The first is the "onfocus" which activate the accessibility checker when the editor area is focused. The second is what I'm looking for, call some command or execute something to validate the content while keyup event is occuring.
The next step is to allow the user to save the content if it is validated. Perhaps a way to get the current accessibility issues list?
CKEDITOR.plugins.a11ychecker.IssueList or editor.plugins.a11ychecker.IssueList ?

Auto-close menu sections on open

We would like to only have one menu section open at a time using mmenu and so does anyone know how we could automatically close any opened sections when a section is expanded?
Thanks
OK i managed to come up with this which works, there's probably a better way to do it:
$("#mm-0 a[href^=#]").click(function() {
var clickedMenu = $(this);
$("#mm-0 a[href^=#]").parent().each(function( i ) {
$(this).removeClass("mm-opened");
});
if($(clickedMenu).parent().hasClass("mm-opened")){
$(clickedMenu).parent().removeClass("mm-opened");
}else{
$(clickedMenu).parent().addClass("mm-opened");
}
});
So i basically add an onclick handler to any anchor links in the menu and then update the class.

ckeditor make dialog element readonly or disable

I need to be able to make the URL input field in the Link Dialog window readonly or disable it. The field gets populated when the user selects a file from the server.
Another user posted this link as a solution, http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.uiElement.html#disable but there is no example and I can't figure out how to implement it.
In the onLoad handler of the dialog you can disable it this way:
this.getContentElement("info", "url").disable();
this is what I ended up doing. I wrote it in my js file instead of the plugin file, but I dont think that would make a difference. I am using inline ckeditor version 4.0.2
CKEDITOR.on('dialogDefinition', function(event) {
var dialogName = event.data.name;
var dialogDefinition = event.data.definition;
//some code here
if(dialogName == 'flash'){ // flash dialog box name
//some code here
dialogDefinition.onShow = function () {
this.getContentElement("info","width").disable(); // info is the name of the tab and width is the id of the element inside the tab
this.getContentElement("info","height").disable();
}
}
});
You can disable url field by just one line
CKEDITOR.dialog.getCurrent().getContentElement('info','txtUrl').disable()
I got it. I added this.getInputElement().setAttribute( 'readOnly', true ); to the onload funciton in ckeditor\plugins\links\dialogs\link.js. Before I was adding it to ckeditor\_source\plugins\links\dialogs\link.js. I'd still like an example of how to use the CKEDITOR.ui.dialog.uiElement disable feature, if anyone has one.

Drupal Node Forms - Image field: How to directly upload an image after choosing a file (no need to click upload button)

I'm trying to change the default behavior of Drupal when adding an image through image field on a content type.
When you choose an image to assign to a node, it's not directly uploaded. You also need to click "upload" to display the preview of your image, and this is not really user friendly.
How can I change this (programmatically) to make Drupal start uploading directly the image after choosing the file.
Thank you for help
You can do it this way:
(function ($) {
Drupal.behaviors.autoUpload = {
attach: function(context, settings) {
$('.form-item input.form-submit[value=Upload]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Upload]', $parent).mousedown();
}
}, 100);
});
$('.form-item input.form-submit[value=Transférer]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Transférer]', $parent).mousedown();
}
}, 100);
});
}
};
})(jQuery);
This solution works with either english and french browsers. Unlike AutoUpload module, which only works on browsers configured in english. Note the [value=Upload] / [value=Upload] attribute
I found a similar post:
https://drupal.stackexchange.com/questions/31121/how-can-i-automatically-upload-images-on-file-selection-rather-than-pressing-the
It's exactly what I need..
You should be able to use http://drupal.org/project/imce for your needs.
I am not sure about the Image field but when I encountered this issue I decided letting users add images in body since it is a much easier option for durpal - When inserting images in text They will show immediately .
IMCE + filefield seems like a viable option for your direct needs,They do mention AJAX support.

Linking Directly to a Tab using Prototype

I'm using Magento to build a storefront - I'm not used to Prototype, but that's what they use by default, so I'm trying to play nice. I have used the tabs setup provided in the Modern theme (built by the Magento team), and I've integrated it into my theme and it works great.
Where I need help is in directly linking to a specific tab - I've created a tab to house the product reviews, and that works fine, but there are links higher up on the page that link to reviews - however, they are linking to another page, which I would rather not use. I'm not familiar with the prototype being used, and I don't know what the link would look like to link to the tab - I'd like the experience to be something similar to:
1) Click on the link
2) The reviews tab opens and the page moves you down to it - like a run-of-the-mill anchor.
The href value of the tab is simply:
javascript:void(0);
The javascript that runs the operation is this:
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('active')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
ul.select('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('active');
contents.show();
} else {
el.removeClassName('active');
contents.hide();
}
});
}
}
new Varien.Tabs('.product-tabs');
My guess is that I need to invoke the showContent function and just force it to use the reviews tab, but I'm not quite sure how to do this. If anyone could shed some light on it, I'd appreciate it.
Thanks.
Not entirely the right answer, ie it cheats a bit, but we solved this by using jQuery's 'click()' function to simulate the tab click.
ie
Gave the reviews tab title anchor an id of 'tab-reviews-tab' and in our link at the top of the page added the following JS:
jQuery('#tab-reviews-tab').click();
Obviously it would be silly to include jQuery just for this, but if you're using it for something else already, sticking to what you know can work!
If someone is still interested in a solution, here is a hint to the same question:
souce link http://www.magentocommerce.com/boards/viewthread/59930/#t262411
Hope this can help u.
The answer to your question is on gist and ipaste.
Here's this summary:
You need to save the Varien.Tabs object in a var so replace the new Varien.Tabs('.product-tabs'); with var csTabs = new Varien.Tabs('.product-tabs');
If you are only doing this one time just create link as such:
<a href="#" onclick="javascript:csTabs.showContent($$('#product_tabs_email_or_other_id a')[0]);" >The Link</a>
If you expect to do this often just add a new method to the Varien.Tabs (at line 75)
openTab: function(b) {
var controlledLink = $$("#"+b+" a")[0];
this.showContent(controlledLink);
}
Now your links work like this:
Email
Further Info

Resources