Send blur event from summernote and mark the control as touched.

Hi,

I need to invoke summernote function Like $('#summernote').summernote('editor.insertText', 'This text should appear at the cursor');

any option for this ?

I need to insert text at current cursor position , so
Ref. Link - summernote/summernote#282

Thanks
kamlesh

I have the editor loaded and the initial content loaded using the summernoteModel:

In component ts:
private wysiwygContent: string;
this.wysiwygContent = '<p>Testing....</p>';

In template:
<div [ngxSummernote]="wysiwygConfig" [summernoteModel]="wysiwygContent"></div>
testing 2 way binding:
<div>{{wysiwygContent}}</div>

However as the content is edited there is no 2 way binding between the summernoteModel and my property wysiwygContent. Is this supported and if so how?
If not how do I get the updated content and manually update the property wysiwygContent, preferably without using jQuery and accessing summernote directly.

I am using the config:
this.wysiwygConfig = { toolbar: [ ['style', ['bold', 'italic', 'underline', 'clear']], ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']], ['fontsize', ['fontname', 'fontsize', 'color']], ['para', ['style0', 'ul', 'ol', 'paragraph', 'height']], ['insert', ['table', 'link', 'hr']], ['misc', ['undo', 'redo', 'codeview']] ] };

Thanks.

Buttton undo removes initial text.

My .html file:

<div [formGroup]="fg">
  <div formControlName='editorText' [ngxSummernote]="configEditor"></div>
</div>

My .ts file:

...
editorControl: FormControl = new FormControl('test');

  constructor(fb: FormBuilder) {
    this.fg = fb.group({
      editorText: this.editorControl
    });
  }

  configEditor = {
    tabsize: 2,
    height: 600,
    toolbar: [
      ['misc', ['undo', 'redo']],
      ['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
      ['para', ['style0', 'ul', 'ol', 'paragraph']]
    ],
  };
...

Is there a way how to solve that ?

I'm trying to create a custom button.
I use the summernote exemple

var HelloButton = function (context) {
      var ui = $.summernote.ui;

      // create button
      var button = ui.button({
        contents: '<i class="fa fa-child"/> Hello',
        tooltip: 'hello',
        click: function () {
          // invoke insertText method with 'hello' on editor module.
          context.invoke('editor.insertText', 'hello');
        }
      });

      return button.render();   // return button as jquery object
    }

But I have got this error
TS2339: Property 'summernote' does not exist on type 'JQueryStatic'.

On start the binding the form control has marked dirty on true.

<div [ngxSummernote]="summerNoteConfig" [formControl]="inputControl"></div>

And the validations are displayed.

The dirty atribute only be mark on start use the component.

Chears..

Hi,
I am dropping a select text (such as a word) in the middle of the content but it always drops and appears at the start position.

Please see attached picture. I was selecting and dragging the word 'Manager' in the box [ ] but once I drop it, it always appears at the start of the content.

Please let me know if there is a way to drag drop (a word or text) at a specific location in the content.

Thanks

Hi team,

I used the uploadImagePath option in config to store the uploaded images to the server.

And my concern here is that if I want to cancel or delete the images I added, is there any way to remove the images stored in the server?

I want something like this can I use this with ngx-summernote

Hi,

I am trying to disable ngxSummernote which i am using under Angular 7 but somehow its not disabling the content inside summer note.

code:-
<input [disabled]="role=='R'" name ="modelContainerLabels" [ngxSummernote]="config" [(ngModel)]="labelingReviewInfo.modelContainerLabels">

i am trying [disabled]="role=='R'"

This is not working, do we have any other alternative??

Thanks
Ramit

Can't open the demo project, It says can't find ngx-summernote module in app.module.ts

In package.json using -
summernote: version

In node_modules -
summernote library exists.

Do I need to worry about XSS when using ngx-summernote? If so, what might be the best way to handle it? I'm new to the issue and would appreciate your thoughts. Thanks.

I can't get the value, in angular form the code is:

this.myForm.value.name

I try this:
<div [ngxSummernoteView]="content" #summer formControlName="sumer" ></div>

With angular forms:
this.myForm.value.name

With ViewChild
this.summer.nativeElement.value

also with innerHTML

but for the summernote component what is the way?

thanks

it gives some random texts when italics is fired

Refer below image.

I can't use ngx-summernote in mat-tab. Because mat-tab.active class has "position:relative" style.
Can i use dialogsInBody property or do you have another solution?

when form is in edit mode text box focus loose with summernote ,
when we click on text box its loses focus,
every time foucus goes to summernote editor

Dear Team,

I've integrated summernote in my website using Angular 7 but at the dropdown menus in the toolbar two caret icons are showing.

Any ideas? Thanks.

I have error ERROR TypeError: _this._$element.summernote is not a function in

Installation
Install ngx-summernote and dependencies:

npm install --save summernote ngx-summernote

Editor
Add add JQuery and Summernote scripts and styles in angular.json file:

"styles": [
...
"node_modules/summernote/dist/summernote-lite.css"
],
"scripts": [
...
"node_modules/jquery/dist/jquery.min.js",
"node_modules/summernote/dist/summernote-lite.js"
]
Use [ngxSummernote] directive on an element to init Summernote editor:

<div [ngxSummernote]></div>

Hi, wondering if this works with ng-bootstrap as it provides angular directives for bootstrap. I tried loading the summernote-bs4 css/js but it seems as though it only supports vanillar bootstrap. Wondering if ng-summernote has a bridge I'm missing in the docs to support it?

I can't add config customized to ngx-summernote

Hi! I'm finding a rich text editor for my Angular project.
I want to use your library.
But there are no licenses. I can use only OSS libraries.

Can you add following license information and rerelease the library?

• LICENSE.txt file (https://help.github.com/articles/licensing-a-repository/)
• License section in README.md
• license field in package.json (https://docs.npmjs.com/files/package.json#license)

The following features are not working:

• Color selection - Reset to default

• 'Bold','Italic','Underline' in the toolbar doesn't appear to be enabled after the user clicked on them

Im using angular6 with summernote version 0.8.11

How to enable this image URL field?

Team,

I am trying an integration of summernote using Angular 7. Despite the fact that there is no error in the console, the editor is not displayed.

app.module.ts

`....
import { NgxSummernoteModule} from "ngx-summernote";
...

@NgModule({
imports: [
...
NgxSummernoteModule,
],
...
})
`

app.component.html
<div [ngxSummernote]></div>

Did I miss anything?

Thanks.

L

Hello,

i want to use the summernote() function to reset my textarea :

$('#summernote').summernote('reset');

I've tried with ViewChild, does not work, same for jQuery manner..

Do you know how to do this ?

Thanks you,
Dylan

Hi,

Initially i have tried cloning your repo with my git and found issue in pasting images after integrating with my application.

Then i created new fresh application by ng new and followed all your steps which was mentioned.
Found the same issue, its not allowing pictures to be pasted through clipboard.

I am using Angular 7.0.6. Seems some additional steps we need to do in order to make it work. Its working better when i clone repo and use it as standalone because that time it uses inbuilt CLI.

The moment i integrate with higher version its not allowing pictures to be pasted.

Please let me know your suggestion and experience to resolve this. I would highly appreciate.

Thanks
Ramit

Hi,

I have integrated this summernote in my Angular 7 application. It integrated smoothly but its not allowing me to paste images which i am using snipping tool of windows. Any suggestion, please help!

Thanks
Ramit

hi,
is there any way to add a text-direction button?
something like this: https://prnt.sc/n79iwg

Thanks,
Guy

The problem occures when using immediateAngularModelUpdate = true in initialization array. While debugging, I found out that you are trying to bind keyup event on _editor, which at this time is not initialized:

To fix this issue, please inverse the following lines (this.zone.runOutsideAngular with this.initListeners):

I'm able to run ngx-summernote but the problem is that,I'm using angular-material.The editor ngx-editor show button large.One other problem is that I'm not able to view the editor in full screen.

Im using jwt-bearer auth on my project that using asp.net core Rest Api and Angular .Instead of using base64 images,i want to upload images to my own server .But i need to send image with header that contains token information.I tried to use uploadImagePath but it gives 401 Unauthorized.Is there a way to upload image with header ?

Hi

I want to store image uploaded from summernote into a .net core api, but I get this error

The image uploaded successfully and the address is ok.

Component and summernote config:

Html Code:

.net core Api action

Anuglar version 7

Asp.Net Core 2.1

I used CkEditor 4 in another project this way and it was okey, image uploaded in rootpath of API accessable with Angular. I don't know why its giving me Not Fount error with Summernote...!

Have you tested ngx-summernote with Angular 8 or are you planning a release for Angular 8?

Your soruse code(https://github.com/lula/ngx-summernote) not work for me. My error is
ERROR in ./src/app/app.module.ts Module not found: Error: Can't resolve '/opt/lampp/htdocs/ngx-summernote/dist/ngx-summernote' in '/opt/lampp/htdocs/ngx-summernote/src/app'

Hi,

How can i retrieve saved images using summernote into byte Array.

My images are getting saving into DB like below
e.g. :-

I am also attaching the string generated after pasting image into summer note and my db

On retrieval I want those to be converted into byte-array.
Any help would be appreciated!
sampleTestImage.txt

Thanks
Ramit

When multiple images are selected, only the first one can be uploaded.
Problematic code：
private async uploadImage(files) { const data = new FormData(); this.imageUpload.emit({ uploading: true }); data.append('image', files[0]); if (this._options.uploadImagePath) { this.http.post(this._options.uploadImagePath, data) .pipe( map((response: { path: string }) => response && typeof response.path === 'string' && response.path), catchError(e => { throwError('An error occured while uploading' + e); return of(''); })) .subscribe(dataIn => { if (dataIn) { this._$element.summernote('insertImage', dataIn); this.imageUpload.emit({ uploading: false }); } else { this.insertFromDataURL(files); } }, (e) => { this.insertFromDataURL(files); }); } else { this.insertFromDataURL(files); } }

I need to get the html code from the editor, but the code is breaking some special characters like for example "á" or "õ".

I have added a plugin which i am trying to use for updating the content but its just updating the content not model.

this is my code:

How can i solve this?

I'm using summernote editor in my angular 8 project. Its working fine.
But Images are uploading and showing in base64.

How can i use upload image and use nxgSummernoteView innerHTML to show images in content.
Contents are blog post.

Please help..

Hello.

Is there a way to access native object like "ViewChild" ?

E.g,
(ViewChild object).nativeElement.function();

Hi,

I beilive that there is a spelling mistake in documentation
... ['para', ['style0', 'ul', 'ol', 'paragraph', 'height']], ...

Probably, there should be style instead of style0

Here's an implementation in jQuery https://gist.github.com/tojibon/118b4c80f328ca394c751d218f330a19
is there a method to implement it using your plugin?
Please, let me know if this feature is available