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

我想开发web应用程序的博客功能，与主要功能相比，它应该是次要的。管理员可以使用博客发布带有reach格式的小文本，并在文本中插入小照片。是否有一些Angular WYSISYG库可以提供文本标记和base64编码的图像，以保存为后端的单个字符串项？

看起来froala允许这样做：

但是请注意，JS示例不会按原样为TypeScript工作

由于以下原因，您应该对其进行一些更改：

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

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

---

}

前面答案中提供的代码没有涵盖所有可能的用例

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

代码的更正版本如下：

公共选项：对象={ 占位符文本：“在此处编辑您的内容！”， 查克：是的， 工具栏按钮XS:[“粗体”、“斜体”、“下划线”、“段落格式”、“警报”]， 工具栏按钮SM:[“粗体”、“斜体”、“下划线”、“段落格式”、“警告”]， 工具栏按钮MD:[“粗体”、“斜体”、“下划线”、“段落格式”、“警告”]， 工具栏按钮：[“上传文件”、“全屏”、“粗体”、“斜体”、“下划线”、“删除线”、“下标”、“上标”、“fontFamily”、“fontSize”、“颜色”、“表情符号”、“inlineStyle”、“paragraphStyle”、“paragraphFormat”、“align”、“formatOL”、“formatUL”、“outdent”]， 活动：{ “image.beforeUpload”：函数文件{ const editor=this； 如果文件为.length{ const image=editor.image.get； //创建一个文件读取器。 const reader=新文件读取器； reader.onload=e=>{ var result=reader.result； editor.image.insertresult，null，null，image； }; //将图像读取为base64。 reader.readAsDataURLfiles[0]； console.logback事件； //将图像读取为base64。 reader.readAsDataURLfiles[0]； } //editor.popups.hideAll； //停止默认上传链。 返回false； } } }

---

如果这是一个大规模应用程序或生产应用程序，请不要担心这样保存的Base64编码图像会严重影响性能。包含大量图像的博客文章会非常慢。@bryan60当然不会。只需用一些gif图片简要说明管理员说明：如果用户粘贴包含多个图像的内容，如word文件中包含多个图像的部分，这里有一个警告。使用此代码，由于竞争条件，第一个映像将覆盖所有其他映像。为了解决这个问题，您必须将editor.image.get移到onload回调之外，以便它始终选择正确的图像。请考虑修改你的答案来考虑这个案例！@TrinTragula目前无法对其进行检查和调试，但我希望您提供最终的代码片段作为一个单独的答案，我更希望将其作为一个真实的答案

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