CODEWITHSUNDEEP
javascripthtmlcssangularjsgrapesjs
Brandon Yu
Brandon Yu

Reputation: 59

Inserting component Setting into Style Manager

Due to the lack of documentation I have a hard time figuring out how to add component settings (traits) into the Style Manager panel section as it is in the demo.

Is there a block of code that exists? I spent 2 days trying to figure this out but I couldn't find anything

styleManager: {

    sectors: [
       {
        name: "General",
        open: !1,
        buildProps: ["float", "display", "position", "top", "right", "left", "bottom"]
    }, {
        name: "Dimension",
        open: !1,
        buildProps: ["width", "height", "max-width", "min-height", "margin", "padding"]
    },

I want to add the component settings inside the Style Manager

Upvotes: 3

Views: 2078

Answers (2)

Emile Caron
Emile Caron

Reputation: 29

I know it is an old question, but this is how you can do it:

editor.on('load', () => {

    editor.runCommand('open-tm'); // you have to make sure the view gets loaded so the selector can select it
    editor.runCommand('open-sm');


    var traitsSector = document.createElement('div');
    traitsSector.className = 'gjs-sm-sector no-select';
    traitsSector.innerHTML = `
      <div class="gjs-sm-sector-title">
        <span class="icon-settings fa fa-cog"></span>
        <span class="gjs-sm-sector-label">Settings</span>
      </div>
      <div class="gjs-sm-properties" style="display: none;"></div>
    `;

    var traitsProps = traitsSector.querySelector('.gjs-sm-properties');
    var traitsCs = document.querySelector('.gjs-traits-cs');
    if (traitsCs) {
          traitsProps.appendChild(traitsCs);
    }});

Upvotes: 0

Julio Martinez
Julio Martinez

Reputation: 9

Here is an example of how to add the feature called "Vertical Align" to the style manager:

var StyleManager = editor.StyleManager;
StyleManager.addProperty("Typography", {
    name: "Vertical Align",
    property: "vertical-align",
    type: "select",
    default: "auto",
    list: [{
            value: "auto",
            name: "auto"
        }, {
            value: "top !important",
            name: "top"
        },
        {
            value: "middle !important",
            name: "middle"
        },
        {
            value: "bottom !important",
            name: "bottom"
        }
    ]
});

Upvotes: 0

Related Questions