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

Question

我想开发 Web 应用程序的博客功能，与主要功能相比，它应该是次要的。管理员，使用博客可以 post 具有触及范围格式的小文本和 post 插入文本的小照片。是否有一些 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) {
    console.log("Start");
    const editor = this;
    if (files.length) {
      console.log("Files: "+files.length);
      // Create a File Reader.
      const reader = new FileReader();
      reader.onload = (e) => {
        var result = reader.result;
        editor.image.insert(result, null, null, editor.image.get());
      };
      // 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;
  }

}

Answer 2

上一个答案中提供的代码并未涵盖所有可能的用例。

粘贴包含多个图像的某些内容（如 word 文件的一部分）会触发错误。代码需要更新，以便以 base64 转换的图像始终是正确的。仅在 onload 回调中选择带有 editor.image.get() 的图像会导致竞争条件，因此第一张图像几乎总是会替换用户在编辑器中粘贴的所有其他图像。

修改后的代码版本如下：

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

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

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

angular

wysiwyg