是否有与Angular兼容的WYSIWYG库，可以将带有标记的文本以及上载的图像保存为单个数据流？

Question

我想开发Web应用程序的博客功能，与主要功能相比，它应该是次要的。管理员使用博客可以发布具有覆盖范围格式的小文本，并可以将插入的小照片发布到文本中。是否有一些Angular WYSISYG库可以提供文本标记以及与base64编码的图像一起保存为后端上的单个字符串条目？

Answer 1

看来froala允许这样做：

https://wysiwyg-editor.froala.help/hc/en-us/articles/115000555949-Can-I-insert-images-as-base64-

但是请注意，JS示例无法按原样用于TypeScript。

您应进行以下更改：https://github.com/microsoft/TypeScript/issues/4163

应该与编辑器参数相关联，如下所示：

<textarea [froalaEditor]="options" [(froalaModel)]="editorContent"></textarea>

并放置在您的组件代码中：

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) {
          // Create a File Reader.
          const reader = new FileReader();
          // Set the reader to insert images when they are loaded.
          reader.onload = (event: Event) => {
            const result = this.result; //CHANGED PART HERE <-------
            editor.image.insert(result, null, null, editor.image.get());
          };
          // Read image as base64.
          reader.readAsDataURL(files[0]);
        }
        editor.popups.hideAll();
        // Stop default upload chain.
        return false;
      }
    }