Customizing The MarkitUp Toolbar

Has anyone figured out how to truely customize the markitup toolbar? Sure you can remove items from the mySettings config variable but that somehow garbles the toolbar. You end up

Solution 1:

I got the same problem. I have found this tutorial (french) that help me to customize the toolbar jaysalvat.com

When creating the new toolbar in the CSS the number in the button name (class) seems important.

markItUpButton1 markItUpButton2 markItUpButton3 markItUpButton4

In CSS if you don't want a button that is associate to markItUpButton2 remove it or comment it and you will have to rename the next markItUpButton3 to markItUpButton2 and so on or change the image associate to it.

The best way it is to start from scratch using the tutorial.

I may be wrong but in my case following the tutorial and the number logic fixed the problem.

Regards,

Solution 2:

I've found it pretty easy to add my own buttons to the toolbar.. just add the className: 'name of class' in with the options/ mySettings config.. example is below for the bold tag

{name:'Bold', key:'B', className: 'pBold', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)' },

then in my stylesheet I do

.markItUp .pBold a {
background-image:url(images/bold.png);
}

Solution 3:

Nowadays, I think it's very easy. You can just set the buttons to display:none in style.css, and comment out the separators in settings.js

Solution 4:

Just got the same problem. Sad, but markitup ties button image to it's order number in header. The only thing you can do is edit both markitupSettings json and css styles file.