Search code examples
vue.jsvue-componentgrapesjs

Is there a way to remove the "Add Image" button of AssetManager of grapesjs editor in a vue component


I want to remove the Add Image button and its textbox. Is there a way to do it, by setting the configuration of assetManager or by some other way ?

grapesjs image upload

 this.editor = new grapesjsEditor.init({
      container: this.forGrapesjs,
      components: this.value,
      assetManager: {
        embedAsBase64: 1,
        uploadText: 'Drag file here or upload',
        upload: 0
      }
    });

Please look into the assetManager configuration. I have set it to upload 0 which is false.


Solution

  • I have hidden the "Add Image" button and its path URL textbox using css styling.

    .gjs-am-add-asset .gjs-am-add-field{
        visibility: hidden;
    }
    
    .gjs-am-add-asset button {
        visibility: hidden;
    }
    
    

    And imported the css into the vue component.

    import './style.css'; 
    

    Upload Image