As I checked the code, main function to change the text color is there. But it is not included in bbcode header.

So I tryd adding color function from markitup to:
sites/default/assets/markitup/sets/default

No change, no wonder it is using functions from:
sites/default/assets/js/editor.js

So I tryd to add color pics to that, but it overrides existing code?

I don't understand why it is not using normal bbcode from here:
sites/default/assets/markitup/sets/default

How do i change the layout to use default set.js and not editor.js?

@pupsik I think thats a question for the Codo team @admin , because that goes so deep into Codoforums guts that as good as no one of the community can tell you the solution. As far as I know Codoforum does only make use of markdown and not bbcode.

What you can also do is to read the markitup documentation here:

http://markitup.jaysalvat.com/documentation/

Kind regards, Andy

WebCrew Thanks. but i know how basic markitup works. And Codo uses modified version that is not exacly easy as plug and play. like i said, they not using standard markitup layout that is infact included in the code.

thats why im wondering how do i change codo to use original set.js markitup that is inside codo forum. than i can add any bbcode from their website you pointed out.

Basically right now I have adit the code to this:

    {separator:'---------------' },
  {name:'Colors', className: "colors", openWith:'[color=[![Color]!]]', closeWith:'[/color]', dropMenu: [
      {name:'Yellow', openWith:'[color=yellow]', closeWith:'[/color]', className:"col1-1" },
      {name:'Orange', openWith:'[color=orange]', closeWith:'[/color]', className:"col1-2" },
      {name:'Red', openWith:'[color=red]', closeWith:'[/color]', className:"col1-3" },
      {name:'Blue', openWith:'[color=blue]', closeWith:'[/color]', className:"col2-1" },
      {name:'Purple', openWith:'[color=purple]', closeWith:'[/color]', className:"col2-2" },
      {name:'Green', openWith:'[color=green]', closeWith:'[/color]', className:"col2-3" },
      {name:'White', openWith:'[color=white]', closeWith:'[/color]', className:"col3-1" },
      {name:'Gray', openWith:'[color=gray]', closeWith:'[/color]', className:"col3-2" },
      {name:'Black', openWith:'[color=black]', closeWith:'[/color]', className:"col3-3" }
  ]},

But it shows right on top of "Headers" menu. And when I click it, drop down menu slides under text editor. Not cool. I would like to be able to use ORIGINAL markitup. Is there a simple way, or do I have to actually replace reply and new topic template? I just not that familiar with this forum. Maybe there is a simple solution to use set.js instead of editor? So I know what I have to do.

Hi,

Yes, we do not use the default set.js because we needed translations and many other features but the json structure we used was indeed standard. We only modified the styles because otherwise, it wasn't matching with the theme.

But, as you said, it is indeed giving issues when adding your json for colours and we agree with you that this should not happen. We will look into it and see if we can make it as simple as just adding your json using the original markitup.

Ok, so we tried to see if it is possible to achieve it with just the json but that seems to be quite difficult.
The main reason for this is because as you see the whole editor itself has a fixed position which layers on top of the content.
This conflicts with the default css of markitup.

So, you can achieve what you want with the combination of json + css (to shift it to a visible location).
Let us know if you want help with that.

Ok. Thanks for reply. I will try to implement 2 things as I go.

First I found that when placing extra button in editor it messes things up. Why, because markitup placing them as they appear 1,2,3,4 and so on. But, markitup doesent recognise "Headers" button as a actual button. And when placing any button will apear on top of another, call it -1. So, we need to eliminate "Headers" with an actual picture button "A". I will show that in a minute. Than the placement will be fixed. That's one issue I fixed.

2nd, drop down menu. As you mentioned it is a css issue. I'm going to try and use drop down css from "Headers" drop down menu, and see if that will work. So far here is what I achieved:

Placement is fixed. I will add translation for buttons later on. Right now issue is with drop down menu. I will work on it and see if I can figure it out.

Yes I changed pictures, Is I like them better than boring black, and it fits to theme perfectly

Ok, I'm stuck here. The class of dropdown menu is "className: "heading", Can you guys point me out to a class element that responsible for overlaying the text editor? I tryd everything, but drop down still shows under text editor.

I did it. Took me a while but who cares. Results:

If needed, I can post what to add to achieve it. If not, oh well.

I'm happy with this. Thank you guys for the help.

@pupsik thank You very much for all your effort You put into it, that's quite good.

I tried to play around with the situation by myself, but with no working results because if I fixed one thing another issue happend and so on.

A wonder You got the job done

Would You be so kind and share the edited files with the community and also to show it to @admin please?
Kind regards, Andy

No problem. Please note, this is my edit and it works, it might not be the best solution or someone might did it different. The pictures I used is original MarkitUp images to fit the style. You may use any others.

Open: sites/default/assets/js/editor.js

Find:

{name: 'Headers', className: "heading", dropMenu: [

Replace with:

{separator:'---------------' },
      {name:'Colors', className: "colors", key: 'C', openWith:'[color=[![Color]!]]', closeWith:'[/color]', dropMenu: [
      {name:'Yellow', openWith:'[color=yellow]', closeWith:'[/color]', className:"col1-1" },
      {name:'Orange', openWith:'[color=orange]', closeWith:'[/color]', className:"col1-2" },
      {name:'Red', openWith:'[color=red]', closeWith:'[/color]', className:"col1-3" },
      {name:'Blue', openWith:'[color=blue]', closeWith:'[/color]', className:"col2-1" },
      {name:'Purple', openWith:'[color=purple]', closeWith:'[/color]', className:"col2-2" },
      {name:'Green', openWith:'[color=green]', closeWith:'[/color]', className:"col2-3" },
      {name:'White', openWith:'[color=white]', closeWith:'[/color]', className:"col3-1" },
      {name:'Gray', openWith:'[color=gray]', closeWith:'[/color]', className:"col3-2" },
      {name:'Black', openWith:'[color=black]', closeWith:'[/color]', className:"col3-3" }
  ]},


  {name: 'Headers', className: "fonts", dropMenu: [

Open: sites/default/themes/default/less/editor.less

Find:

.markItUp .markItUpButton9 a    {
    background-image:url(../img/smileyimg.png);
}

Add after:

.markItUp .colors {
   left: 300px;
   position: absolute;
}

.markItUpHeader .colors ul{
    top: 23px;
    z-index:300;
}

.markItUpHeader .markItUpButton11 a {
    background-image:url(../img/colors.png);
    top: 23px;
    z-index:300;
}

    .markItUpHeader .markItUpButton11 ul {
        width:81px;
        padding:1px;

    }
    .markItUpHeader .markItUpButton11  li {
        border:1px solid white;
        width:25px;    height:25px;
        overflow:hidden;
        padding:0px; margin:0px;
        float:left;    
    }

    .markItUpHeader .markItUpButton11 ul a {
        width:25px;    height:25px;
    }

    .markItUpHeader .markItUpButton11 ul a:hover {
        background-color:none;
    }

    .markItUp .markItUpButton11 .col1-1 a {
        background:yellow;
    }
    .markItUp .markItUpButton11 .col1-2 a {
        background:orange;
    }
    .markItUp .markItUpButton11 .col1-3 a {
        background:red;
    }

    .markItUp .markItUpButton11 .col2-1 a {
        background:blue;
    }
    .markItUp .markItUpButton11 .col2-2 a {
        background:purple;
    }
    .markItUp .markItUpButton11 .col2-3 a {
        background:green;
    }

    .markItUp .markItUpButton11 .col3-1 a {
        background:white;
    }
    .markItUp .markItUpButton11 .col3-2 a {
        background:gray;
    }
    .markItUp .markItUpButton11 .col3-3 a {
        background:black;
    }


.markItUp .fonts {
   left: 320px;
   position: absolute;
}

.markItUpHeader .fonts ul{
    top: 23px;
    z-index:300;
}

.markItUp .markItUpButton12 a {
    background-image:url(../img/fonts.png);
}

.markItUpHeader .markItUpButton12  li {

        border:1px solid white;
        overflow:hidden;
        padding:0px; margin:0px;
        float:left;
}
.markItUp .markItUpButton12 .header1 > a{
    background-image:none;
    font-size: 2em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;
}

.markItUp .markItUpButton12 .header2 > a{
    background-image:none;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .markItUpButton12 .header3 > a{
    background-image:none;
    font-size: 1.17em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .markItUpButton12 .header4 > a{
    background-image:none;
    font-size: 1em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .markItUpButton12 .header5 > a{
    background-image:none;
    font-size: .83em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .markItUpButton12 .header6 > a{
    background-image:none;
    font-size: .75em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}

Note! Add styles to the theme you are using or to all of them.
Optional: I no longer use headers as a style, so I deleted this:

.markItUp .heading {
    border-radius: 2px;
    -webkit-box-shadow: rgba(255, 255, 255, 0.0980392) 1px 1px inset, rgba(0, 0, 0, 0.0980392) 1px 1px;
    box-shadow: rgba(255, 255, 255, 0.0980392) 1px 1px inset, rgba(0, 0, 0, 0.0980392) 1px 1px;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.0980392), transparent);
    background-repeat: repeat-x;
    background-color: @markItUpHeadingBg;
    color: @markItUpHeadingColor;
    border-color: rgba(0, 0, 0, 0.298039);
    .transition(0.3s linear box-shadow);
    padding-bottom: 0px;
    padding-top: 2px;
    padding-right: 4px;
    margin-left: 10px;
    margin-top: 7px;
    position: absolute;
    left: 280px;    
}


.markItUpHeader .heading:hover {

    border-color: @markItUpHeadingHoverBorder;
}

.markItUp .heading:hover {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.1));
    background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));

}

.markItUpHeader .heading > a{

    text-indent: 0;
    width: 50px;
    height: 20px;
    text-align: center;
    cursor: pointer;
    color: @markItUpHeading_A_color;
}


.markItUpHeader > ul > li > a {

    background-size: contain;
}

.markItUp .heading > ul > li > a {

    width: 100%;

}

.markItUp .heading .header1 > a{

    font-size: 2em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;
}

.markItUp .heading .header2 > a{

    font-size: 1.5em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .heading .header3 > a{

    font-size: 1.17em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .heading .header4 > a{

    font-size: 1em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .heading .header5 > a{

    font-size: .83em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .heading .header6 > a{

    font-size: .75em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}


.markItUpHeader .heading ul{

    background: white;
    border: 1px solid @markItUpHeaderHeadingUlBorder;
    top: 23px;
    left: -1px;
    padding: 6px 0px;
    width: 200px;
    z-index:300;

}

.markItUpHeader .heading ul li {

    text-align: left;
    line-height: 8px;
    border-bottom: 0;
    margin: 0;
    padding: 0;
}

That's it. You can now add 2 images colors.png and fonts.png to your theme. Default sites/default/themes/default/img. Overridte existing images if you feel like it.

Enjoy!

@pupsik thank you very much for sharing the code with the community

Would be a nice topic at the "tutorial section" of Codoforum community:
https://codologic.com/forum/index.php?u=/category/tutorials

Kind regards, Andy

You can create it if you like. Copy paste that last part with images i provided as preview and give it a nice name. I don't care for credit. If its gonna help someone, hell, thats all that matters.

Right now im doing something that will benefit Russian community "Transliterator". I just gotta find out onclick event in markitup and boom. Also I will translate this whole thing in to Russian. Get some more people up in here.