CODEWITHSUNDEEP
angulartinymce
user8207722
user8207722

Reputation:

how do I get content written of TinyMCE with Angular4?

I need to store the content written inside the tinyMCE editor on my html page after clicking a submit button, but I have no idea how. I have the EditorComponent in my AppModule imported.

my component.html has the following editor embedded in it:

<editor
   (onSaveContent)="somefunction()"
   [init]="{
     height: 500,
     menubar: false,
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table paste code help wordcount',
       'save'
     ],
     toolbar:
       'undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat | help | save'      
   }">
</editor>

I have a function known as getcontent() { // } in my Component.Ts file. I don't know exactly what to do at this point as other online topics uses Javascript or PHP specifically (I'm using Angular 4)

essentially, I have a string initialized known as str and I need this content inserted here to update my backend database.

on other articles, I see them using the class tinyMCE and calling functions on it but I am unable to access it in my Angular application.

however, I am able to run (onSaveContent)="somefunction()" when I click save; I just need to get the content of what I wrote to a String variable

Upvotes: 2

Views: 3526

Answers (2)

Sadisha
Sadisha

Reputation: 571

Use

[(ngModel)]="content"

Upvotes: 0

Dean
Dean

Reputation: 2273

Based on the fact that you mentioned EditorComponent, I'm assuming you are using this package. In that case, it's simple; you just use ngModel to two-way bind the value of tiny mce's editor with a property in your component:

<editor
   (onSaveContent)="somefunction()"
   [(ngModel)]="html"
   [init]="{
     height: 500,
     menubar: false,
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table paste code help wordcount',
       'save'
     ],
     toolbar:
       'undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat | help | save'

   }"></editor>

And in your component:

// String field to store our HTML
html = '<p>Hi, TinyMCE!</p>';
somefunction() {
  // Do something here.
  console.log(this.html);
}

Here's a working stackblitz example.

Upvotes: 1

Related Questions