I added own tool with some code like. How can I add custom class to added table? To any element?
ve.ui.commandRegistry.register(
new ve.ui.Command(
'insertTable4',
'content',
'insert',
{
args: [[
{ type: 'table' }, // How can I add custom class here?
{ type: '/table' },
</pre>How to generate table with custom class {| class="custom" ... |} by Custom VE Command?
There are a few topics in this page about wrapping selection in custom tags, but none of them seem to give a complete working example. I am posting here my gadget to wrap text in "<bible></bible>" tags, in case it helps to someone:
ve.ui.BibliaCommand = function VeUiBibliaCommand() {
ve.ui.BibliaCommand.super.call( this, 'Biblia' );
};
OO.inheritClass( ve.ui.BibliaCommand, ve.ui.Command );
ve.ui.BibliaCommand.prototype.execute = function ( surface ) {
var model = surface.getModel(),
doc = model.getDocument(),
range = model.getSelection().getRange(),
docRange = doc.shallowCloneFromRange( range );
ve.init.target.getWikitextFragment( docRange, false ).done( function ( wikitext ) {
model.getFragment().insertHtml('<bible>'+wikitext+'</bible>');
} );
};
ve.ui.commandRegistry.register( new ve.ui.BibliaCommand() );
ve.ui.BibliaTool = function VeUiBibliaTool() {
ve.ui.BibliaTool.super.apply( this, arguments );
};
OO.inheritClass( ve.ui.BibliaTool, ve.ui.Tool );
ve.ui.BibliaTool.static.name = 'Biblia';
ve.ui.BibliaTool.static.group = 'cite';
ve.ui.BibliaTool.static.icon = 'book';
ve.ui.BibliaTool.static.title = 'Biblia';
ve.ui.BibliaTool.static.commandName = 'Biblia';
ve.ui.toolFactory.register( ve.ui.BibliaTool );
Now, I have one problem: this code creates a new line before and after the wrapped text, but I want it to stay inline. Anybody can suggest a solution?
Okay, I figured it out. I did two replace transactions, in order to remove the newlines inserted before and after the HTLM (2 characters each, since they are CR/LF). It looks like this:
model.getFragment().insertHtml('<bible>'+wikitext+'</bible>');
var inicio = model.selection.range.from;
var mitransac = ve.dm.TransactionBuilder.static.newFromReplacement( doc, new ve.Range( inicio, inicio+2 ), '' )
model.getFragment().change(mitransac);
var fin = model.selection.range.to;
var mitransac2 = ve.dm.TransactionBuilder.static.newFromReplacement( doc, new ve.Range( fin-2, fin ), '' )
model.getFragment().change(mitransac2);
Hi.
I successfully added a few custom tools in my mediawiki and they are working great, but none of them is capable of open a dialong in which the user can input parameters for my templates. I would love to add a button to my Visual Editor where users could press it to pass a string value to a parameter called "titulo" in my template called "Fluxograma" for instance, but I can't make it work properly. PS: "Fluxograma" stands for "Flowchart" in portuguese, and the template is using DrawIo Extension and is working properly, but I would like to make it easier to insert new flowchars then manually searching in the template menu. I would like a buttom for itself, asking for a name/title ("Titulo) and inserting the template.
I also intend to use the same strategy to add a buttom to insert highlightsyntaxjs (extension) tags (passing the language parameter and the text with the code to be highlighted), is this indeed the best strategy for such things?
My attempt so far is on the code below:
function criaFluxograma() {
var Fluxograma = [ {
type: 'mwTransclusionBlock',
attributes: {
mw: {
parts: [ {
template: {
target: {
href: 'Template:Fluxograma',
wt: 'Fluxograma'
},
params: {
'titulo': {
wt: 'Nome'
}
}
}
} ]
}
}
}, {
type: '/mwTransclusionBlock'
} ];
ve.ui.commandRegistry.register(
new Fluxograma( 'comandoFluxograma', {
args: [ Fluxograma, false ],
supportedSelections: [ 'linear' ]
} )
);
function insFluxograma( name, options ) {
insFluxograma.parent.call( this, name, null, null, options );
}
OO.inheritClass( insFluxograma, ve.ui.Command );
insFluxograma.prototype.execute = function( surface, args ) {
args = args || this.args;
surface.getModel().getFragment().collapseToEnd().insertContent( args[0], args[1] ).select();
surface.execute( 'window', 'open', 'transclusion' );
return true;
};
insFluxograma.static.name = 'Fluxograma';
insFluxograma.static.group = 'insert';
insFluxograma.static.title = 'Fluxograma';
insFluxograma.static.commandName = 'comandoFluxograma';
insFluxograma.static.icon = 'lock';
insFluxograma.static.autoAddToCatchall = false;
insFluxograma.static.autoAddToGroup = true;
ve.ui.toolFactory.register( insFluxograma );
}
// Inicialização
mw.hook( 've.loadModules' ).add( function( addPlugin ) {
addPlugin( criaFluxograma );
} );
Can anyone help me?
Hello, I try to insert wikitext like <br> with gadget in order to not pass by the wikitext Editor so I try this after looking in the wiki.
ve.ui.commandRegistry.register(
new ve.ui.Command(
// Command name
'myBreak',
// Type and name of the action to execute
'content', 'insert', // Calls the ve.ui.ContentAction#insert method
{
// Extra arguments for the action
args: [
// Content to insert
[
'\n',
ve.init.target.getSurface().getModel().getFragment().insertHtml('<br>')
],// Annotate content to match surrounding annotations?
false,
// Move cursor to after the new content? (otherwise - select it)
true],
supportedSelections: [ 'linear' ]
}));
But I have an error at the line 35 when I test my gadget here is the error in the consol.
Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'VeDmDocument'
| property 'bindings' -> object with constructor 'Object'
| property 'transact' -> object with constructor 'Array'
| ...
| property 'context' -> object with constructor 'VeDmInternalList'
--- property 'document' closes the circle
at JSON.stringify (<anonymous>)
at VeDmSurface.ve.dm.Surface.storeChanges (load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:178:921)
at VeDmSurface.OO.EventEmitter.emit (<anonymous>:445:652)
at VeDmSurface.ve.dm.Surface.breakpoint (load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:174:240)
ve.dm.Surface.storeChanges @ load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:178
OO.EventEmitter.emit @ VM3027:445
ve.dm.Surface.breakpoint @ load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:174
setTimeout (asynchrone)
OO.EventEmitter.emit @ VM3027:445
ve.dm.Surface.breakpoint @ load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:174
setInterval (asynchrone)
ve.dm.Surface.startHistoryTracking @ load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:161
ve.dm.Surface.resetHistoryTrackingInterval @ load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:162
ve.dm.Surface.breakpoint @ load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:173
ve.ce.Surface.handleObservedChanges @ load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:484
ve.ce.SurfaceObserver.pollOnceInternal @ load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:508
ve.ce.SurfaceObserver.pollOnce @ load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:508
ve.ce.Surface.afterDocumentMouseUp @ load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:440
setTimeout (asynchrone)
ve.ce.Surface.onDocumentMouseUp @ load.php?lang=fr&modules=ext.visualEditor.core%2Cmwtransclusion&skin=timeless&version=3ben0:440
dispatch @ load.php?lang=fr&modules=ext.CodeMirror.lib%7Cext.HighlightjsIntegration%7Cjquery%2Coojs-ui-core%2Coojs-ui-widgets%7Cjquery.ui%7Coojs-ui.styles.icons-editing-advanced&skin=timeless&version=1l7ie:475
elemData.handle @ load.php?lang=fr&modules=ext.CodeMirror.lib%7Cext.HighlightjsIntegration%7Cjquery%2Coojs-ui-core%2Coojs-ui-widgets%7Cjquery.ui%7Coojs-ui.styles.icons-editing-advanced&skin=timeless&version=1l7ie:471
I don't understand this error or how to resolved it.
so if someone has a hint I would be thankful. Thank you
Well, I can't help you directly, but w:en:User:Matma Rex/nwe-nowiki.js adds a different code, so maybe you could adapt something from that?
thank you for the tips, but I don't know why the code dosent work. he have this error :
load.php?lang=fr&modules=ext.HighlightjsIntegration%7Cjquery&skin=timeless&version=mfrgu:197
jQuery.Deferred exception: ve.ui.wikitextCommandRegistry is not a function TypeError: ve.ui.wikitextCommandRegistry is not a function
So I look to the documentation and I found ve.ui.MWWikitextCommandRegistry - VisualEditor - Documentation (wikimedia.org) so normaly it work...
so did you have any tips (maybe somethink I do wrong) because I know that ve.ui should work here.
Unfortunately, I don't know anything about coding. Perhaps it would be worth asking at Project:Support desk? Some coders hang out there.
Hi, following the examples given, I have been able to insert an all-defined template at cursor position, but unable to do something as simple as to wrap selection in a (mono-argument) template. I.e :
I guess it is really simple but I spend hours trying to figure out how to do that... Any help would be highly appreciated !
EDIT : I precise I know how to do it using getText(), but it returns the plain text selection and so it removes the links and wikitext formatting.
I don't know how to solve your problem, sorry.
Is it always the same template? I think this can be done with quotation marks, in the VisualEditor/Special characters tool, and (if your wiki only needs one template to work like this), I wonder if it might be faster and easier to pretend that {{MyTemplate| and }} were just strange quotation marks.
In case it helps, here is the code I used to achieve what I wanted.
This one defineds a "CrossedOut" button that adds a simple template {{CrossedOut|MyText}} that put "strikethroug" formatting (with a custom infotip) to the selection.
ve.ui.CrossedOutCommand = function VeUiCrossedOutCommand() {
ve.ui.CrossedOutCommand.super.call( this, 'CrossedOut' );
};
OO.inheritClass( ve.ui.CrossedOutCommand, ve.ui.Command );
ve.ui.CrossedOutCommand.prototype.execute = function ( surface ) {
var model = surface.getModel(),
doc = model.getDocument(),
range = model.getSelection().getRange(),
docRange = doc.shallowCloneFromRange( range );
ve.init.target.getWikitextFragment( docRange, false ).done( function ( wikitext ) {
model.getFragment().insertContent([
{
type: 'mwTransclusionInline',
attributes: {
mw: {
parts: [{
template: {
target: {
href: 'Template:CrossedOut',
wt: 'CrossedOut'
},
params: {
1: {
wt: wikitext
}
}
}
}]
}
}
} , {
type: '/mwTransclusionInline'
} ] );
} );
};
ve.ui.commandRegistry.register( new ve.ui.CrossedOutCommand() );
ve.ui.CrossedOutTool = function VeUiCrossedOutTool() {
ve.ui.CrossedOutTool.super.apply( this, arguments );
};
OO.inheritClass( ve.ui.CrossedOutTool, ve.ui.Tool );
ve.ui.CrossedOutTool.static.name = 'CrossedOut';
ve.ui.CrossedOutTool.static.icon = 'strikethrough';
ve.ui.CrossedOutTool.static.title = OO.ui.deferMsg('CrossedOut');
ve.ui.CrossedOutTool.static.commandName = 'CrossedOut';
ve.ui.toolFactory.register( ve.ui.CrossedOutTool );
Hi,
I adapted the example to add a template in a private wiki. The template accepts something like a reference and a text and generates an internal link to a local file ressource. It works very well generally, I do have only one problem in the VisualEditor "visual" mode.
When I add the template via the menue, I can then press the "edit" button of the template in the VisualEditor and edit the parameters of the template. I can also use the menue a second time to add the same template a second time. When I then edit the parameters of the second template, also the parameters of the first already inserted templates get modified which is not intended to happen.
I guess it is because the tool insers the same instance of the object again instead of creating a new object or something like that (?), but my JavaScript expertise is not good enough to know what I need to change here.
If someone has a hint I would be thankful. Thank you
Not very many people watch this page, so you might have better luck if you ask at the Project:Support desk.
They'll probably need to see the code you're using.
Hi, I have been trying to create a gadget that enclose the currently selected text with a "math" tag. Can anyone guide me to a tutorial (or doc) explains that?
I figured out how. That what I was looking for: ve.init.target.surface.getModel().getFragment().insertHtml() (if you are interested in).
Congratulations on finding your solution. It might also be possible to implement this particular feature via the VisualEditor/Special characters tool.
"execute it in your browser's console before VE is loaded"
You lost me right there. How do I do that?
One reason I've chosen MediaWiki is that it can be installed and maintain by a non-programmer. I can follow a PHP code cookbook and copy routines and tweak their parameters to do new things, but there are many gaps in my knowledge. They might appear elementary to you, but they're chasms for me.
Also, examples of the results might be helpful.
I'm not even sure this page is what I'm looking for. I just want to add a tool to the visual editor toolbar, so the users can insert text at the cursor point. (In this case, it will be a relatively long string of code to create expandable text). My understanding that the function would be another "tool," but is that the same thing as a "gadget"?
Hmm. Well, speaking as one strictly-non-programmer to another, here are the things that I know, and perhaps that will answer some questions: