CODEWITHSUNDEEP
javascripthtmlnode.jsangular
user1990406
user1990406

Reputation: 679

How to save and load content from html WYSIWYG editor in angular

I think I will end up using a node/express backend with MongoDB if that makes sense for this situation...

I eventually want to be able to save the content from the content editable div to backend in a way that it can be reuploaded at a later time from the backend... the reuploaded data then can be placed in a non-editable HTML div for display, or back into a content editable div for more editing.

Does anyone have any advice on this? Maybe there is a way to save all of the dom elements from within the editor div, in a way that can be translated back into HTML so it renders?

Thanks, any advice is appreciated

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>

Angular Component

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

  }

}

Upvotes: 4

Views: 4187

Answers (2)

danday74
danday74

Reputation: 56966

I'm going to add a 2nd answer because possibly I misunderstood the question with the first answer. If you are talking about the content of a single div then you could do checks to ensure the contents are valid using jQuery.parseHtml()

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

For a step up for extra umph you could use jsdom, which allows you to create a DOM from a string:

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

Which you can traverse like you would traverse the Windows DOM, etc.

Also worth looking at cheerio:

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

All these libs can be used client and server side.

They can be used to check validity, check contents, check for disallowed tags, etc

In Angular you would render HTML that is known to be valid like so:

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

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

You would possibly want it to work something like this:

DIV ONE - renders the HTML as plain text (during editing only)

DIV TWO - renders the parsed HTML if it is valid, both during and after editing (should always be valid when editing is finished, attempting to close an editing session should test validity using the aforementioned libs)

But consider the security concerns at:

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

Upvotes: 1

danday74
danday74

Reputation: 56966

Node/express and Mongo sounds like a great idea.

Returning HTML / DOM stuff, this sounds like a bad idea. Keep the frontend logic at the frontend.

In the old days frontend logic and backend logic was always thrown together, e.g. PHP and Java.

Nowadays, there is a separation between the frontend and the backend for good reason.

This approach allows a single backend to serve potentially many different frontends and if the backend is returning JSON the frontends can render that JSON however they wish.

If you start returning HTML from the backend and a different frontend wants to render that data in a different way you are stuffed.

If you want to serve the data over a public API you are also stuffed.

Just keep it simple and return JSON from the backend.

We have this exact problem on the project I am working on and it is a real headache when it should be so simple.

Upvotes: 0

Related Questions