как получить контент, написанный на TinyMCE с Angular4?

Question

Мне нужно сохранить содержимое, написанное в редакторе tinyMCE, на моей странице html после нажатия кнопки отправки, но я понятия не имею, как. У меня EditorComponent в моем AppModule импортирован.

Мой компонент. html имеет следующий встроенный редактор:

<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>

У меня есть функция, известная как getcontent () {// } в моем Component.Ts файле. Я не знаю точно, что делать в данный момент, так как другие онлайн-темы используют Javascript или PHP специально (я использую Angular 4)

, по сути, у меня есть инициализированная строка, известная как str и мне нужно вставить это содержимое, чтобы обновить мою базу данных.

В других статьях я вижу, что они используют класс tinyMCE и вызывают его функции, но я не могу получить к нему доступ в своем приложении Angular.

однако я могу запустить (onSaveContent) = "somefunction ()" при нажатии кнопки "Сохранить"; Мне просто нужно получить содержимое того, что я написал, в строковую переменную

Answer 1

Исходя из того, что вы упомянули EditorComponent, я предполагаю, что вы используете этот пакет . В этом случае все просто; вы просто используете ngModel для двустороннего связывания значения редактора крошечного mce со свойством в вашем компоненте:

<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>

А в вашем компоненте:

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

Вот пример рабочего стекаблица .