react 中富文本编辑器wangeditor 使用上传附件插件自定义上传报错：没有配置上传地址

如果您在使用wangeditor的上传附件插件时出现“没有配置上传地址”的错误，可能是因为您没有正确地配置上传地址。请按照以下步骤进行检查和解决：

1. 确认您已经在后端配置了上传接口，并将接口地址正确地填写到了wangeditor上传附件插件的配置中。

2. 如果您的上传接口返回的是相对路径而非完整的URL地址，那么您需要在上传成功后，将相对路径转换为完整的URL地址，再返回给前端。您可以使用类似于以下代码的方式来实现：

// 假设您的上传接口返回的是相对路径
const relativeUrl = response.data.url;

// 将相对路径转换为完整的URL地址
const absoluteUrl = `https://your-domain.com/${relativeUrl}`;

// 将完整的URL地址返回给前端
return { url: absoluteUrl };

3. 如果您的上传接口需要进行额外的身份验证，比如需要携带token才能上传成功，那么您需要在上传附件插件的配置中添加相应的headers信息，来传递这些身份验证信息。例如：

editor.config.uploadHeaders = {
  Authorization: `Bearer ${token}`
};

希望这些解决方案能够解决您的问题。如果您仍然无法解决问题，请提供更多详细信息，以便我能够更好地帮助您。

相关问题

react 中 wangeditor富文本编辑器中 insertFn函数

在 React 中使用 wangEditor 富文本编辑器时，insertFn 函数用于向编辑器中插入自定义内容。它的基本用法如下：

1. 首先需要在组件中创建一个 ref 对象，用于获取 wangEditor 实例：

import React, { Component } from 'react';
import wangEditor from 'wangeditor';

class Editor extends Component {
  constructor(props) {
    super(props);
    this.editorRef = React.createRef();
  }

  componentDidMount() {
    const editor = new wangEditor(this.editorRef.current);
    editor.create();
    this.editor = editor;
  }

  render() {
    return (
      <div ref={this.editorRef} />
    );
  }
}

2. 在组件中定义 insertFn 函数：

const insertFn = (content) => {
  const editor = this.editor;
  const range = editor.selection.getRange();
  range.deleteContents();
  const node = document.createElement('div');
  node.innerHTML = content;
  range.insertNode(node);
  editor.selection.restoreSelection();
};

3. 在组件渲染时，将 insertFn 函数传递给 wangEditor 实例：

componentDidMount() {
  const editor = new wangEditor(this.editorRef.current);
  editor.customConfig.onchange = (html) => {
    this.props.onChange(html);
  };
  editor.customConfig.menus = [...];
  editor.customConfig.insertFn = insertFn;
  editor.create();
  this.editor = editor;
}

这样就可以在编辑器中使用 insertFn 函数插入自定义内容了。

react 富文本编辑器

回答: 有几个流行的React富文本编辑器可供选择，其中包括Slate.js、Quill.js和Braft Editor。Slate.js是一个受到Draft.js启发的富文本编辑器，可以用于构建漂亮的编辑器，如Medium Editor、Dropbox Paper或Google Docs。[1]如果你想实现一个具有自定义功能的内存优化的富文本编辑器，Slate.js是你最好的选择之一，可以使用yarn或npm轻松安装。[2]Quill.js是另一个流行的富文本编辑器，可以使用npm或yarn将其添加到你的项目中。[3]另外，Braft Editor也是一个可选的富文本编辑器，可以使用npm或yarn进行安装。[3]根据你的需求和喜好，你可以选择其中一个来实现React富文本编辑器的功能。