Cpassetpath into tolbar wysiwyg

Hello,
I would like to insert the cpassetpath inside the wysiwyg panel.

I tried the EditorFormats addon but it doesn’t give me the option to remove the menu and insert items included in the toolbar.

I have tried this in my field but it doesn’t work, is there a way to insert this button?

{
  "editor": {
    "plugins": "cpassetpath",
    "toolbar": "undo redo | formatselect | bold italic underline | bullist numlist indent outdent | link unlink | cpassetpath",
    "formats": {
      "underline": {
        "inline": "u",
        "exact": true
      }
    },
    "block_formats": "Paragrafo=p;Titolo 1=h1;Titolo 2=h2;Titolo 3=h3;Titolo 4=h4;",
    "contextmenu": false,
    "entity_encoding": "raw",
    "forced_root_block": "p",
    "menubar": false
  }
}

hi @raffaelj,
sorry if I tag you, I would like to know if it’s possible to have support on this problem of mine

I think, the name cpassetpath is outdated… Did you try it with cpasset instead?

Hi,
i tried doing this but it doesn’t work.

"plugins": "cpassetpath",
"toolbar": "undo redo | bullist numlist indent outdent | link unlink | cpasset",

The plugin name is cpasset.

Sorry but not found.

My code is:

{
  "editor": {
    "plugin": "cpasset",
    "toolbar": "undo redo | formatselect | bold italic underline | bullist numlist indent outdent | link unlink | cpasset",
    "formats": {
      "underline": {
        "inline": "u",
        "exact": true
      }
    },
    "block_formats": "Paragrafo=p;Titolo 1=h1;Titolo 2=h2;Titolo 3=h3;Titolo 4=h4;",
    "contextmenu": false,
    "entity_encoding": "raw",
    "forced_root_block": "p",
    "menubar": false
  }
}

Please help me

@raffaelj
sorry if I tag you, is there a solution for this problem of mine?

@alessandro1992ma Sorry for the late reply. I was a bit busy.

Now I had a closer look and I was able to reproduce your setup - with a solution. But first: I was wrong. The plugin wasn’t renamed to cpasset. I think, it was renamed from assetpath to cpassetpath around a year ago. Sorry for the confusion.

The problem is, that the cpassetpath plugin doesn’t have a button specified. I didn’t notice that, because I normally use a custom asset plugin when I use Cockpit with CpMultiplane. I also use the EditorFormats addon to copy my settings to new projects so I don’t have to think about it anymore.

Solution:

Load a custom js file. I named mine wysiwyg-asset-button.js and saved it in /config. Load it via /config/bootstrap.php

if (COCKPIT_ADMIN_CP) {
    $app->helper('admin')->addAssets('#config:wysiwyg-asset-button.js');
}

Content of /config/wysiwyg-asset-button.js:

App.$(document).on('init-wysiwyg-editor', function(e, editor) {

    editor.addButton('assetpath', {
        icon: 'image',
        tooltip: App.i18n.get('Insert Asset (Assets)'),
        onclick: function(){

            App.assets.select(function(assets){

                if (Array.isArray(assets) && assets[0]) {

                    var asset = assets[0], content;

                    if (asset.mime.match(/^image\//)) {
                        content = '<img src="' + ASSETS_URL+asset.path + '" alt="">';
                    } else {
                        content = '<a href="' + ASSETS_URL+asset.path + '">'+asset.title+'<a>';
                    }

                    editor.insertContent(content);
                }
            });

        },
        stateSelector: 'img' // highlight toolbar icon when image is selected
    });

});

Now you can use assetpath in your toolbar. Side note: There was a typo in your second example - use plugins instead of plugin.

{
  "editor": {
    "plugins": "cpassetpath",
    "toolbar": "undo redo | formatselect | bold italic underline | bullist numlist indent outdent | link unlink | assetpath",
    "formats": {
      "underline": {
        "inline": "u",
        "exact": true
      }
    },
    "block_formats": "Paragrafo=p;Titolo 1=h1;Titolo 2=h2;Titolo 3=h3;Titolo 4=h4;",
    "contextmenu": false,
    "entity_encoding": "raw",
    "forced_root_block": "p",
    "menubar": false
  }
}

Screenshot_20200519_175623

It also works with the EditorFormats addon.

This functionality should be added to the core, so you may have to remove that modification with an upcoming cockpit release.

Resources:

1 Like