Как сохранить и загрузить контент из HTML-редактора WYSIWYG в угловых

Question

Я думаю, что в конечном итоге я буду использовать нод / экспресс-бэкэнд с MongoDB, если это имеет смысл для этой ситуации ...

В конце концов, я хочу сохранить контент из редактируемого div содержимого в бэкэндтаким образом, что он может быть повторно загружен позднее из бэкэнда ... затем повторно загруженные данные могут быть помещены в не редактируемый HTML-div для отображения или обратно в контент-редактируемый div для дальнейшего редактирования.

У кого-нибудь есть советы по этому поводу?Может быть, есть способ сохранить все элементы dom из div редактора, чтобы его можно было перевести обратно в HTML, чтобы он отображался?

Спасибо, любой совет приветствуется

HTML

  <div>
    <input type="button" (click)="iBold()" value="B">
  </div>
  <div id='editor' contenteditable>
    <h1>A WYSIWYG Editor.</h1>
    <p>Try making some changes here. Add your own text.</p>
  </div>

угловой компонент

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor() { }

  model = '<h1>A WYSIWYG Editor.</h1><p>Try making some changes here.     Add your own text.</p>';

  editor: any;

  ngOnInit() {
    this.editor = document.getElementById('editor');
  }
  iBold() {
    document.execCommand('bold', false, null);

  }

}

Answer 1

Я собираюсь добавить второй ответ, потому что, возможно, я неправильно понял вопрос с первым ответом.Если вы говорите о содержимом одного div, то вы можете проверить, чтобы убедиться, что содержимое является действительным, используя jQuery.parseHtml()

https://api.jquery.com/jquery.parsehtml/

Для того, чтобы подняться на дополнительный ум, вы могли быиспользуйте jsdom, который позволяет вам создать DOM из строки:

https://www.npmjs.com/package/jsdom

, которую вы можете перемещать, как если бы вы проходили через DOM Windows, и т. д.

ТакжеСтоит посмотреть на cheerio:

https://www.npmjs.com/package/cheerio

Все эти библиотеки могут быть использованы на стороне клиента и сервера.

Они могут быть использованы для проверки действительности, проверки содержимого, проверкизапрещенные теги и т. д.

В Angular вы должны отобразить HTML, который, как известно, является действительным, например:

<div [innerHTML]="myHTML"></div>

См. https://www.dev6.com/Angular-2-HTML-binding

Возможно, вы захотитеработать примерно так:

DIV ONE - отображать HTML как обычный текст (только во время редактирования)

DIV TWO - отображать проанализированный HTMLесли он действителен, как во время, так и после редактирования (всегда должен быть действительным, когда редактирование завершено, попыткаНапример, чтобы закрыть сеанс редактирования, следует проверить достоверность с использованием вышеупомянутых библиотек)

Но рассмотрите вопросы безопасности по адресу:

https://angular.io/guide/security#bypass-security-apis

Answer 2

Node / express и Mongo звучат как отличная идея.

Возвращаясь к HTML / DOM, это звучит как плохая идея.Держите логику внешнего интерфейса на внешнем интерфейсе.

В старые времена логику внешнего интерфейса и логику внутреннего интерфейса всегда объединяли, например, PHP и Java.

В настоящее время существует разделение между внешним интерфейсом ибэкэнд по уважительной причине.

Этот подход позволяет одному бэкэнду обслуживать потенциально много разных веб-интерфейсов, и, если бэкэнд возвращает JSON, веб-интерфейсы могут отображать этот JSON так, как они желают.

Если вы начинаете возвращатьHTML из бэкэнда и другого внешнего интерфейса хочет визуализировать эти данные другим способом:

Если вы хотите обрабатывать данные через общедоступный API, вы также будете заполнены.

Простооставьте его простым и верните JSON из бэкэнда.

У нас есть точная проблема в проекте, над которым я работаю, и это настоящая головная боль, когда он должен быть таким простым.