We Keep Coding

How to remove old tinymce style_format classes when changing / updating format

I have created some custom style formats, that add a class to a block level element. The problem is that when I apply one style it keeps the old class and adds the new class.
How do I remove the old class when switching to another format?
mce_options_article = {
// ...
formats: {
p_grey: { selector: 'p', classes: 'grey' },
p_red: { selector: 'p', classes: 'red' }
},
style_formats: [
{title: 'Paragraph Color', items: [
{title: 'Grey ', format:'p_grey'},
{title: 'Red ', format:'p_red'},
]},
]
// ...
}

Use attributes instead of classes.
This is what I did:
mce_options_article = {
// ...
formats: {
p_grey: { selector: 'p', attributes: {'class':'grey'} }, // use attributes
p_red: { selector: 'p', attributes: {'class':'red'} } // use attributes
},
style_formats: [
{title: 'Paragraph Color', items: [
{title: 'Grey ', format:'p_grey'},
{title: 'Red ', format:'p_red'},
]},
]
// ...
}

The solution of using formats and then referencing them in style_formats didn't work for me (using TinyMCE v4.x), I think because I was trying to define 2 sets of styles for H tags - one with a class and one without. It resulted in all of the styles being disabled (I'm not entirely sure why).
I ended up adding an event handler for ExecCommand in the setup:
setup: function (editor) {
editor.on('ExecCommand', function (e) {
if (e.command === 'mceToggleFormat' && e.value.startsWith('custom')) {
var format = e.target.settings.style_formats.filter(obj => { return obj.name === e.value; })[0];
e.target.selection.getSelectedBlocks()[0].className = format.classes ? format.classes.join(' ') : '';
}
});
}
This seems to work ok, but doesn't always seem to highlight the current format when the 'Format' dropdown is shown, although I think that this is due to the style formats I have defined, rather than the above code.
I hope this helps someone out with the same issue that I had, but obviously test it thoroughly with your code before using it.

Add Custom Button in User JavaScript for MediaWiki

I want to create a button like the one that inserts your signature. How to do this?
After doing some research I figured out that I can insert custom buttons with the User:MYUSERNAME/common.js page.
I saw several examples. But the wiki references and informations are often splittet across multiple pages and out dated. So I try here if I am lucky and find someone who tried similar things.
Who can help me with this:
var customizeToolbar = function() {
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'advanced',
group: 'format',
tools: {
"comment": {
label: 'Comment',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/3/37/Btn_toolbar_commentaire.png',
action: {
type: 'encapsulate',
options: {
pre: "<!-- ",
post: " -->"
}
}
}
}
});
};
When I do it like this, nothing happens because customizeTooblar most likely gets never called. When I remove it, it says that wikiEditor is not defined.
I already enabled $wgAllowUserJs = true; in LocalSettings.php.
I saw this question: Creating custom edit buttons for MediaWiki Is this still the way we should do this kind of things? This is possibly not a dublicate question because I am already asking about my particular issue here.

The problem was that the initiation code was missing.
This code should directly add a smiley label to your advanced toolbar:
var customizeToolbar = function() {
/* Your code goes here */
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
'section': 'advanced',
'group': 'insert',
'tools': {
'SimpleComment': {
label: 'Comment',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Gnome-face-smile.svg/22px-Gnome-face-smile.svg.png',
action: {
type: 'encapsulate',
options: {
pre: "preText",
post: "postText"
}
}
}
}
} );
};
/* Check if view is in edit mode and that the required modules are available. Then, customize the toolbar … */
if ( $.inArray( mw.config.get( 'wgAction' ), [ 'edit', 'submit' ] ) !== -1 ) {
mw.loader.using( 'user.options', function () {
// This can be the string "0" if the user disabled the preference ([[phab:T54542#555387]])
if ( mw.user.options.get( 'usebetatoolbar' ) == 1 ) {
$.when(
mw.loader.using( 'ext.wikiEditor.toolbar' ), $.ready
).then( customizeToolbar );
}
} );
}
// Add the customizations to LiquidThreads' edit toolbar, if available
mw.hook( 'ext.lqt.textareaCreated' ).add( customizeToolbar );
Can be added to wiki/User:YOUR_USRNAME/common.js
In LocalSettings.php this option must be enabled $wgAllowUserJs = true;

zoomcharts - 1.5.1 hover over multiple links doesn't work

I see that zoomcharts has come up with cool features in their latest update (1.5.1), but it has some bugs i believe...
I am not able to hover over middle links in case of multiple links between two nodes. I can only hover over 1st and last link
If you just copy paste the following code here, you can test it yourself...
<script>
var data = {
"nodes":[
{"id":"n1", "loaded":true, "style":{"label":"Node1"}},
{"id":"n2", "loaded":true, "style":{"label":"Node2"}}
],
"links":[
{"id":"l1","from":"n1", "to":"n2", "style":{"fillColor":"red", "toDecoration":"arrow"}},
{"id":"l11","from":"n1", "to":"n2", "style":{"fillColor":"red", "toDecoration":"arrow"}},
{"id":"l111","from":"n1", "to":"n2", "style":{"fillColor":"red", "toDecoration":"arrow"}},
{"id":"l114","from":"n1", "to":"n2", "style":{"fillColor":"red", "toDecoration":"arrow"}}
]
};
var t = new NetChart({
container: document.getElementById("demo"),
area: { height: 350 },
data: { preloaded: data },
info: {enabled: true, linkContentsFunction: function(data, link, callback) {
return link.id;
}}
});
</script>

This issue has been solved in version 1.8.
Until it is released you can also use the nightly build from: https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js

TinyMce create toolbar dropdown containing more toolbar items

This seems like it ought to be simple to do, but I'm having a hard time figuring it out. I have a tinymce instance, and for various reasons I want to have all the toolbar items on one long line. The problem is that there are slightly too many items for it all to fit so I'd like to create a custom button and put the toolbar items in there. Something like:
tinyMCE.init({
...
setup: function(editor) {
editor.addButton('insertMenu', {
type: 'listbox',
text: 'Insert',
icon: false,
items: 'code link'
});
},
toolbar1: 'insertMenu undo redo | bold italic |alignjustify | ...
Obviously that doesn't work because the items: 'code link' isn't correct for a listbox.. but it I'd hope it's possible to do this sort of thing in tinyMCE. Yes I have looked at examples like http://www.tinymce.com/tryit/3_x/menu_button.php but they always contain text links etc. whereas I just want to reuse the existing toolbar icons and functionality.

You were almost there. You could use something like this if you wanted to define your button inline in the initialiser as you're doing it, or else you might be better off moving the functionality out into a separate plugin and requiring that in your initialiser. http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin
editor.addButton('insertMenu', function() {
var items = [{text: 'Option 1', value: 'option1Value'}, {text: 'Option 2', value: 'option2Value'}];
return {
type: 'listbox',
text: 'select box title',
tooltip: 'a tooltip',
values: items,
fixedWidth: true,
onclick: function(e) {
console.log('Value selected: ' + e.control.settings.value)
}
};
});

tinyMCE plugin accessing element

I'm trying to write a tinymce plugin, so I checked out the tutorial "Creating a plugin" on http://www.tinymce.com/. Inserting and Replacing Content is no problem, everything works fine.
Now i want to change the value of the textbox automatically after changing the value of the listbox. As an example, after changing the listbox element, the value of the active element should be written to the textbox above. How can I access this element?
tinymce.PluginManager.add('myexample', function(editor, url) {
// Add a button that opens a window
editor.addButton('myexample',
{
text: 'Example',
onclick: function()
{
// Open window
editor.windowManager.open({
title: 'Example Plugin',
body: [
// Text
{type: 'textbox', name: 'title', label: 'Text', value: 'temp'},
// Listbox
{type: 'listbox', name: 'test', label: 'Ziel',
'values':
[
{text: 'Eins', value: '1'},
{text: 'Zwei', value: '2'}
],
onselect: function(v)
{
console.log(this.value());
// CHANGE THE VALUE OF THE TEXTBOX ...
// ????
}
}
],
onsubmit: function(e)
{
console.log(e.data.title, e.data.test);
}
});
}
});
});

I know this is an old question, but I was facing the same issue and I found this answer in another forum that saved my day.
The standard tinymce way to do this is to save the popup window in a variable:
var win = editor.windowManager.open({ //etc
And then for accessing the element:
win.find('#text'); // where text is the name specified
I hope this can help someone else in the future.

Now I found a solution. The best method is not to use the internal form-designer. You can use an IFrame with an external html-page, then you can work with document.getElementById(...)
Here you can find an example