时间戳

首页 > 解决方案 > 如何使用 Quill 文本编辑器上传屏幕截图

angular - 如何使用 Quill 文本编辑器上传屏幕截图

问题描述

我是 Angular 的初学者。我正在制作一个技术博客网站。这是我的第一个 Angular 项目。我正在使用MEAN堆栈。除了通过quill. 抱歉，我无法将整个代码粘贴到此处，因为这里太混乱了。这是我的contribute.component.html

<div class="container">
  <div class="row pt-5">
    ...
    <quill-editor [styles]="editorStyle" [modules]="config" ...></quill-editor>
  </div>
</div>

和contribute.component.ts

  config = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['image','code-block'],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'script': 'sub'}, { 'script': 'super' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'font': [] }],
      ['link']
    ]
  }

Mongodb中的文档结构如下：

  makeNewPost={
    articleid: "",
    title: "",
    content: "", <----screenshots should be included with this
    date: "",
    contributor: ""
  };

很抱歉，创建 stackblitz 也是不可能的。但这里是整个项目：GitHub。负责该系统的文件位于此位置：

  1. 社交编码器/应用程序/src/app/contribute/contribute.html
  2. 社交编码器/应用程序/src/app/contribute/contribute.ts

每当我尝试将图像与内容一起上传时，我都会收到他的错误：

跨域请求被阻止：同源策略不允许在http://localhost:3000/api/contribute读取远程资源。（原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

Object { headers: {…}, status: 0, statusText: "Unknown Error", url: " http://localhost:3000/api/contribute ", ok: false, name: "HttpErrorResponse", message: "Http 失败http://localhost:3000/api/contribute的响应：0 未知错误”，错误：错误}

您现在可以使用我的凭据：

用户：demouser@nomail.com

通过：test12_mail

请纠正我。

这是已部署的应用程序：SocialCoder。请使用上述凭据登录。但是你找不到任何image工具，因为我还没有和主人合并。

标签： angularmean-stackquill

解决方案

推荐阅读