In the the ckeditor init, to remove dialog tabs, it is possible to do something like:
CKEDITOR.on( 'dialogDefinition', function( ev )
{
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're interested in
if ( dialogName == 'link' )
{
dialogDefinition.removeContents( 'advanced' );
}
});
This will remove the "advanced" tab from the link dialog.
It also possible to remove specific attributes from a tab, doing something like:
var infoTab = dialogDefinition.getContents( 'info' );
// Remove unnecessary widgets from the 'Link Info' tab.
infoTab.remove( 'linkType');
infoTab.remove( 'protocol');
So this works fine, but my problem is I could not find a detailed list of the attributes names, like 'linkType' or 'protocol' in the example above.
Basically I would like to remove, from the image dialog for example, the width, height, the css class and id from the advanced tab etc, but I cannot find a the names of these attributes in the ckeditor documentation, does someone know where I can find this ?
Or give a list?
You can use the Developer tools plugin as explained in the HowTos: http://docs.cksource.com/CKEditor_3.x/Howto/Field_Names
Related
I`m trying to insert a custom link to a special page in VisualEditor toolbar. See the image below.
See Image
I googled a lot but without success. Someone please give a path...
My answer is based on the following resources:
MediaWiki core JS doc (ooui-js)
VisualEditor JS doc (+ reading code of both repositories used for VE, mediawiki/extension/VisualEditor and VisualEditor)
Also, I'm pretty sure, that there is no documented way of adding a tool to the toolbar in VE, as far as I know. Although it's possible to add a tool to a group, which is already added, mostly used for the "Insert" tool group, like in Syntaxhighlight_GeSHi). There is, probably, a much easier or "better" way of doing this :)
First, VisualEditor provides a way to load additional modules (called plugins) when the main part of VE loads (mostly, when you click the "Edit" button). The modules needs to be registered via the global variable $wgVisualEditorPluginModules (or the equivalent in extension.json, if you're using the new extension registration). In your extension registration file, you should initialize a module (with your required script files to add the tool) and add it as a VE plugin.
Example PHP (old extension registration via PHP files):
// other setup...
$wgResourceModules['ext.extName.visualeditor'] = array(
'localBasePath' => __DIR__,
'remoteExtPath' => 'extName'
'dependencies' => array(
'ext.visualEditor.mwcore',
),
'scripts' => array(
'javascripts/ve.ui.ExtNameTool.js',
),
'messages' => array(
'extname-ve-toolname',
),
);
$wgVisualEditorPluginModules[] = 'ext.extName.visualeditor';
// other setup...
extension.json (new JSON-based extension registration):
// other setup...
"ResourceModules": {
"ext.geshi.visualEditor": {
"scripts": [
"javascripts/ve.ui.ExtNameTool.js"
],
"dependencies": [
"ext.visualEditor.mwcore"
],
"messages": [
"extname-ve-toolname"
]
}
},
"VisualEditorPluginModules": [
"ext.extName.visualeditor"
],
// other setup...
Now, if VE starts, it will load your module, named ext.extName.visualeditor in this example, with the script ve.ui.ExtNameTool.js. In this script, you can now do, what ever you want. As an example, this is a way to add a new module to the end of the toolgroup list in the toolbar:
Example of ve.ui.ExtNameTool.js:
( function () {
// create a new class, which will inherit ve.ui.Tool,
// which represents one tool
ve.ui.extNameTool = function extNameTool( toolGroup, config ) {
// parent constructor
ve.ui.extNameTool.super.apply( this, arguments );
// the tool should be enabled by default, enable it
this.setDisabled( false );
}
// inherit ve.ui.Tool
OO.inheritClass( ve.ui.extNameTool, ve.ui.Tool );
// every tool needs at least a name, or an icon
// (with the static property icon)
ve.ui.extNameTool.static.name = 'extname';
// don't add the tool to a named group automatically
ve.ui.extNameTool.static.autoAddToGroup = false;
// prevent this tool to be added to a catch-all group (*),
although this tool isn't added to a group
ve.ui.extNameTool.static.autoAddToCatchall = false;
// the title of the group (it's a message key,
// which should be added to the extensions i18n
// en.json file to be translateable)
// can be a string, too
ve.ui.extNameTool.static.title =
OO.ui.deferMsg( 'extname-ve-toolname' );
// onSelect is the handler for a click on the tool
ve.ui.extNameTool.prototype.onSelect = function () {
// show an alert box only, but you can do anything
alert( 'Hello' );
this.setActive( false );
}
// needs to be overwritten, but does nothing so far
ve.ui.extNameTool.prototype.onUpdateState = function () {
ve.ui.extNameTool.super.prototype.onUpdateState.apply( this, arguments );
}
// the tool needs to be registered to the toolFactory
// of the toolbar to be reachable with the given name
ve.ui.toolFactory.register( ve.ui.extNameTool );
// add this tool to the toolbar
ve.init.mw.Target.static.toolbarGroups.push( {
// this will create a new toolgroup with the tools
// named in this include directive. The naem is the name given
// in the static property of the tool
include: [ 'extname' ]
} );
} )();
After installing the extension in your LocalSettings.php and starting VE, you should see a new tool in the toolbar with the given name. Clicking it will show an alert box with content "Hello". Like written in the inline comments: In the click handler (onSelect) you can do whatever you want, e.g. open a link in a new tab, e.g. to a Special page. To get the link to a special page I would suggest to use mw.Title to get a localized namespace. For example:
var relativeUrl = mw.Title.newFromText( 'RecentChanges', -1 ).getUrl();
The first parameter of mw.Title.newFromText() is the name of the page, the second parameter is the ID of the namespace (-1 is the default for special pages and should always work).
I hope that helps!
I am not sure I understand your question entirely. It is as simple as selecting some text, clicking the chain icon, then clicking the External Link tab and pasting your link there.
I have a list of courses in rows like this:
Whenever I click a row, a new tab is created, and a new window is added to that tab showing the course info.
Then if I press back, it goes back to the courses window, which is great, but when I click another course it adds that to the list of tabs, so it starts looking like this:
Whereas, there should only be two tabs here, the Courses tab and Get Courses tab.
In get_courses.js (the file that deals with making the rows) I have this event listener which creates a new tab every time a row is clicked (which I'm sure is where my mistake is, I'm just not sure how to fix it):
table.addEventListener("click",function(e){
var courseInfo_window = Titanium.UI.createWindow({
title:e.rowData.title,
url:'get_courseInfo.js',
courseIMISCode: e.rowData.courseIMISCode
});
var courseInfo_tab = Titanium.UI.createTab({
title:'Course Info',
window:courseInfo_window
});
Titanium.UI.currentTabGroup.addTab(courseInfo_tab);
});
Which I want to be there to create a Course Info tab, but then in get_courseInfo.js I have this, possibly redundant code:
Ti.UI.currentTabGroup.activeTab.open(courseInfo_window);
Which, in my noob mind seems necessary to open my courseInfo_window, but is accumulating the tabs in the bottom (as shown in the image earlier).
TL;DR: What do I need to do (probably in get_courses.js) to update the Course Info tab instead of opening a new tab for each row click?
You can access tabs in TabGroup through tabs property. However, it would be easier to keep reference to tab which you created outside of event listener and modify inside:
var courseInfo_tab = null;
table.addEventListener("click",function(e){
var courseInfo_window = Titanium.UI.createWindow({
title:e.rowData.title,
url:'get_courseInfo.js',
courseIMISCode: e.rowData.courseIMISCode
});
if (courseInfo_tab === null) {
courseInfo_tab = Titanium.UI.createTab({
title:'Course Info',
window:courseInfo_window
});
Titanium.UI.currentTabGroup.addTab(courseInfo_tab);
} else {
courseInfo_tab.window = courseInfo_window;
}
});
that is we have opened many tabs.In that tabs i want to search specific tab. Please tell if any ext or option or add-on in chrome or firefox.
Firefox has this functionality built in. If you just start typing in the URL bar and the first character you type is % followed by a space, the rest of what you type will be treated as a search on the titles and urls of open tabs in all Firefox windows.
I'm not sure if this is the site to be asking for help finding extensions that do end user tasks such as this so I'll answer your question explicitly as well as explain how to do it programatically.
The short answer is, yes one extension that will allow you to do this can be found here:
Tab Title Search
The long answer is, in order to find all tabs with a certain name, you need to use the chrome tabs API
I whipped up a short piece of javascript to demonstrate how to have an extension that will create a popup with a search box that you type the desired tab title into. If the tab is found, it will be listed below the search box. If you click on the listing, you will switch to the tab.
// Function to search for tabs
function searchtabs() {
chrome.tabs.query({
title: ""
},
// Callback to process results
function(results) {
// Place holder for the tab to process
var foundTab = null;
// Text to match against
var queryText = document.getElementById("textToSearchInput").value;
// Div to place divs of matched title in
var queryAnswerDiv = document.getElementById("foundTabsDiv");
// Clear the current children
while (queryAnswerDiv.hasChildNodes()) {
queryAnswerDiv.removeChild(queryAnswerDiv.lastChild);
}
// Iterate over all the results
for (var i = 0; i < results.length; i++) {
// Keep track of the tab that is currently being processed
foundTab = results[i];
// If we have a title containing our string...
if (foundTab.title.indexOf(queryText) > -1) {
// Create a new div
var tabDiv = document.createElement("div");
// Set its content to the tabs title
tabDiv.innerHTML = foundTab.title;
// Let it know what the tabs id is
tabDiv.tabToSwitchTo = results[i].id;
// Allow for users to click on the representing div to switch to it
tabDiv.onclick = function() {
// Make the tab selected
chrome.tabs.update(this.tabToSwitchTo, {
selected: true
});
};
// Append the created div to our answer div
queryAnswerDiv.appendChild(tabDiv);
}
}
});
}
document.addEventListener('DOMContentLoaded', function() {
var inputField = document.getElementById("textToSearchInput");
inputField.focus();
inputField.onkeydown = searchtabs;
});
Also, if this is more what you are looking for rather than the extension that I linked, let me know and I can pack this extension.
Edit:
Fixed an error in using the wrong ID to get the input field as well as not getting the first letter of the title (use indexOf() > -1)
An extension that does this is Tab Hero for Chrome ($0.99 Chrome extension). It searches through all of the open tabs (across multiple windows) and offers to switch to the filtered tab. Try and see if it works for you.
(Question1, question2 and question3 looks how to force users open link in new tab)
But in my situation I visit some sites regularly and they have links like this:
<a href='javascript:window.open("/view.php?id=1234","_self")'>Link name</a>
This type of link makes me impossible to open link in new tab with a mouse click. Every time I see these links, I duplicate the tab in Chrome and click link inside the cloned tab. And go back to original tab and continue to surf. Is it possible to open these links in new tab with a chrome extension, js code or something?
You can try one of the links here: http://bit.ly/12dUk4V
. . The problem is that these links can be kind of "about:blank" because they are not specified in the href attribute normally, so it breaks your expected behavior when using ctrl+click, middle click or something alike. Sometimes sites links to "javascript:" pseudo-protocol, sometimes the link is for "#" with a "onclick" trigger... It depends on the situation.
. . For this specific case it's easy enough to write a user script that will rewrite these kind of links, if you're willing to use something like Tampermonkey:
// ==UserScript==
// #name SelfLinks Fixer
// #namespace http://dnun.es./
// #version 0.1
// #description This script rewrites "window.open(..., '_self')" links so that you can click them as you wish.
// #match http://libgen.info/*
// #copyright 2013, http://dnun.es.
// ==/UserScript==
var tRegExp = '^javascript: *'+
'(window\\.)?open\\('+
' *(([\'"])([^\\3]+)\\3) *,'+
' *[\'"]_self[\'"] *'+
'\\) *;? *$';
var fixLinksCheck = new RegExp(tRegExp);
var as = document.getElementsByTagName('a'), i = 0, n = as.length, a;
for (;i<n;i++) { a = as[i];
if (fixLinksCheck.test(a.href)) { //damn you _self link!
a.href = a.href.replace(fixLinksCheck, '$4');
}
}
. . This code "fixes" only the "_self" links by changing them to normal links. You can then click them with middle button, holding ctrl/shift or whatever. It also leave the "_blank" or "_top" links untouched.
Yes, it is possible. All you need is to inject a simple line of JavaScript code in every page. I had done it before in a Firefox extension.
You just need to override window.open method:
var open_= window.open;
window.open = function(url, name, opts) {
if (name === '_self') { name = '_blank'; }
open_(url, '_blank', opts);
};
Complete code on JsFiddle: http://jsfiddle.net/dp4Uz/
I'm using the Spark's TextArea that contains links like this:
#hashtag
As you can see, this is a link to the Twitter search page for the specific hashtag. The hash-sign must be escaped in the query string. But, I have a problem here: when I click the link, the '%' symbol gets escaped automatically and the URL becomes corrupted (...search?q=%2523hashtag). Can I turn off this automatic escaping?
The '#' sign, if used in the URL, does not become escaped, and therefore the Twitter page does not open correctly in this case. So I cannot use neither '#' nor '%23' in the URL.
I would appreciate any solution for this.
Thank you.
Ok... so far, I couldn't find a way to turn off the automatic escaping of the URL when it's clicked. But I've found the workaround instead.
Basically, I add a custom click handler to all the link elements inside the TextFlow and open the links manually when clicked (instead of a built-in TLF behavior). Like this:
public function addLinkHandler( textFlowOrGroupElement: FlowGroupElement ): void
{
// scan the flow elements
for ( var f1: int = 0; f1 < textFlowOrGroupElement.numChildren; f1 ++ ) {
// found element
var curFlowGroupElement: FlowElement = textFlowOrGroupElement.getChildAt( f1 );
// if this is the link element, add the click event listener
if ( curFlowGroupElement is LinkElement ) {
( curFlowGroupElement as LinkElement ).addEventListener( FlowElementMouseEvent.CLICK, onLinkClick );
}
// if this is another flow group
else if ( curFlowGroupElement is FlowGroupElement ) {
// scan this group in turn, recursively
addLinkHandler( curFlowGroupElement as FlowGroupElement );
}
}
}
and here is the click handler for the links:
public function onLinkClick( e: FlowElementMouseEvent ): void
{
e.stopImmediatePropagation();
e.preventDefault();
var linkElement: LinkElement = e.flowElement as LinkElement;
navigateToURL( new URLRequest( linkElement.href ), '_blank' );
}
So in the end to make the Twitter-hashtag links work correctly in the TextArea, I do this:
addLinkHandler( textArea.textFlow );
P.S. The algorithm of adding the click handlers is based on this post, but optimized.