How to save structure of site/document created with a rich text editor to create read-only views and editable rich text editors again?

Question

I need to save some content of an editor in some kind of backend, which currently is unspecified. At the moment I´m struggling the structure of the created document. In the editor the user should be able to write text and place videos or images without an fixed structure of how the images and text should be placed. The user should place these 3 components in any order he wants underneath each other.

In practice the editor looks something like this:

Q: How is it possible to save the structure, to load the exact same editor the next time or to create read-only<div> containers and editable rich text editors again with the content?

My first idea was to split the editor in smaller sub-editors as soon as the type of content changes. So for example you are starting with only one editor with text. Then the user adds another editor (for example with an button click) and adds an image. But I´m not sure if the user accepts this and nevertheless puts all content (text and images) in the first editor.

---

My second idea was to save the whole html created inside the editors code-view and to load it back inside the editor the next time the side is ordered. But I´m not sure if it´s possible this way to create "normal" read-only <div> containers with the same content.

In my opinion both of my ideas aren´t that good, so i´m asking you guys what you are suggesting to do.

Answer 1

Best way will be by saving the html source inside the WYSIWYG Editor. At load time start with empty editor and inject the saved html source inside it. This will provide the best fidelity of the saved content.

WYSIWYG editors mostly work with an DIV or IFrame tag, which takes input and transformed it to required html code. This code is inserted at appropriate location within the WYSIWYG tag. Locating and saving the content of this tag should work for you with any kind of formatting and media combination inside the editor.

Another aspect to look into will be saving of media files, in case they are not already being available as permanent URL. The image in the URL might be uploaded at temporary location at the time of editing. To save the content you might also need to save all those local media files (and later restore at loading time).

Answer 2

A Working concept with any Angular2+ compatible Rich Text Editor

My best pick would be Angular Froala since it provides a variety of integration using different tools such as Angular CLI, Webpack, Angular Seed etc.

If you're using Angular CLI, you can simply include it in your project through npm and declare it as your module's dependency.

npm install angular-froala-wysiwyg --save

app.module.ts

// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...

@NgModule({
   ...
   imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
   ...
})

And in your .angular-cli.json, you can declare the related CSS and JS like below:

"styles": [
  "styles.css",
  "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
  "../node_modules/froala-editor/css/froala_style.min.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/froala-editor/js/froala_editor.pkgd.min.js"
]

After you've done this setup, you can simply see the editor in your HTML by using froalaEditor component on any textarea element.

<textarea [froalaEditor] [(froalaModel)]="editorContent">Hello, Froala!</textarea>

It will create a two-way binding for the editorContent object. So whatever you write in the Froala editor will actually be saved in editorContent variable of your current component.

Now you can simply save the contents of editorContent to your API, and don't need to bother about transforming the HTML or so.

To know more about the features, refer to the usage documentation.