Is there Angular compatible WYSIWYG libraries that allow to save the text with markup as well as uploaded images as the single data stream?

Question

I'd like to develop the blog feature of the web application which should be secondary comparing to the main features. Admins, using blogs can post small texts with reach formatting and post small photos inserted to the text. Is there some Angular WYSISYG libraries that can provide the text markup together with base64-encoded images to be saved as a single string entry on the backend?

Answer 1

The code provided in the previous answer doesn't cover all possible use cases.

There is a bug triggered by pasting some content (like a section of a word file) that contains more than one image. The code needs to be updated so that the image to convert in base64 will always be the correct one. Selecting the image with editor.image.get() only inside the onload callback results in a race condition that makes it so the first image will almost always replace every other image the user is pasting in the editor.

A corrected version of the code is as follows:

public options: Object = {
    placeholderText: 'Edit Your Content Here!',
    charCounterCount: true,
    toolbarButtonsXS: ['bold', 'italic', 'underline', 'paragraphFormat', 'alert'],
    toolbarButtonsSM: ['bold', 'italic', 'underline', 'paragraphFormat', 'alert'],
    toolbarButtonsMD: ['bold', 'italic', 'underline', 'paragraphFormat', 'alert'],
    toolbarButtons: ['uploadFile', 'fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent'],
    events: {
        'image.beforeUpload': function (files) {
            const editor = this;
            if (files.length) {
                const image = editor.image.get();
                // Create a File Reader.
                const reader = new FileReader();
                reader.onload = (e) => {
                    var result = reader.result;
                    editor.image.insert(result, null, null, image);
                };
                // Read image as base64.
                reader.readAsDataURL(files[0]);
                console.log("Behind event");
                // Read image as base64.
                reader.readAsDataURL(files[0]);
            }
            //editor.popups.hideAll();
            // Stop default upload chain.
            return false;
        }
    }
}