how to add custom button in summernote editor

Question

hello all, I'm using angulat 10 in that I'm facing problem with summernote following code in... html. "summernote1" class = "summernote" > "summernote2" class = "summernote" > "summernote3" class = "summernote" > component.ts // Summer Note $( ".summernote" ).summernote({ height: 200, toolbar: [ [ 'style' , [ 'bold' , 'italic' , 'underline' , 'clear' ]] ] }); Que.1.how to add Custom button in summernote toolbar and click event call(ex.(click)="function(content)") one function and open popup. Que.2.how to find id (ex.summernote1) in click textarea. Thanking you...

Sachin Singh · Answer

This is how we add buttons to summernote with click event handler var HightlightButton = function(context) { var ui = $.summernote.ui; var button = ui.button({ contents: ' Highlight3' , tooltip: 'Highlight text with red color' , click: function() { context.invoke( 'editor.foreColor' , 'red' ); // do whatever you want here like open popup } }); return button.render(); } $(document).ready(function() { $( '#summernote' ).summernote({ toolbar: [ [ 'style' , [ 'highlight' , 'bold' , 'italic' , 'underline' , 'clear' ]], [ 'font' , [ 'strikethrough' , 'superscript' , 'subscript' ]], [ 'para' , [ 'ul' , 'ol' , 'paragraph' ]], [ 'view' , [ 'codeview' ]] ], buttons: { highlight: HightlightButton, } }); });

Sachin Singh · Answer

test without using if statement and keeping toolbar simple HelloButton = (context) => { const ui = $.summernote.ui; // create button const button = ui.button({ contents: ' Hello' , tooltip: 'hello' , click: () => { context.invoke( 'editor.insertText' , 'hello' ); } }); return button.render(); } } // Summer Note $(document).ready(() => { $( '.summernote' ).summernote({ toolbar: [ [ 'mybutton' , [ 'hello' ]] ], buttons: { hello: HelloButton } }); callbacks: { onChange: () => { this .toasterService.success($( '.summernote' ).summernote( 'code' )); } } }); });

Sachin Singh · Answer

The error may be causing due to the precedence , that is why i have used ready function so that the summernote could initialize before loading the dom. check how are you invoking the function or find out how can you use ready in angular.

Sachin Singh · Answer

please share how are you instantiating the popup for example for bootstrap model it simple be $( "#myModel" ).model( 'show' );

Akshay · Answer

I already use ready function.. HelloButton = (context) => { const ui = $.summernote.ui; if (ui) { // create button const button = ui.button({ contents: ' Hello' , tooltip: 'hello' , click: () => { context.invoke( 'editor.insertText' , 'hello' ); } }); return button.render(); } } // Summer Note $(document).ready(() => { $( ".summernote" ).summernote({ height: 200, toolbar: [ [ 'style' , [ 'bold' , 'italic' , 'underline' , 'clear' ]], [ 'mybutton' , [ 'hello' ]] ], buttons: { hello: this .HelloButton }, callbacks: { onChange: () => { this .toasterService.success($( '.summernote' ).summernote( 'code' )); } } }); });

Akshay · Answer

I tried this function but I'm getting following error on hover of custom button ERROR TypeError: Cannot read property 'top' of undefined at t.value

Akshay · Answer

html. "showPopup(content)" > "close('e')" > class = "modal-body" > Template component.ts showPopup(content) { //code this .modalService.open(content, { backdrop: 'static' , size: 'lg' , centered: true , keyboard: false }); }); } }

Akshay · Answer

I want to one popupon click of custom button. I am not able to call a function inside click event of custom button. i have tried with " this " keyword but I am getting error of can not able to read property of undefined.

Akshay · Answer

i already test without if statement but show same error. ERROR TypeError: Cannot read property 'top' of undefined at t.value HelloButton = (context) => { const ui = $.summernote.ui; // create button const button = ui.button({ contents: ' Hello' , tooltip: 'hello' , click: () => { context.invoke( 'editor.insertText' , 'hello' ); } }); return button.render(); }