标签: react-quill

在使用 为我的项目安装依赖项时npm install，我收到以下错误，但我不知道如何解释：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: soft-ui-dashboard-pro-react@3.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.9 || ^15.3.0 || ^16.0.0" from react-quill@1.3.5
npm ERR! node_modules/react-quill
npm ERR!   react-quill@"1.3.5" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this …

使用react-quill，我在文本中编写一个列表，将内容存储到外部存储中，将内容重新加载到quill中：在列表之前插入一个新的<br>，并且每次重新加载时都会发生。
知道发生了什么以及如何预防吗？

我准备了一个最小的沙箱来显示问题：https://codesandbox.io/s/reverent-cookies-m5h3x
重现步骤：

• 写一行，然后是项目符号列表
• 单击保存将内容存储到外部存储
• 单击清除以从编辑器中删除所有内容
• 单击加载将内容从外部存储放入编辑器
• 繁荣！每个保存-清除-加载周期都会插入一个新的 <br>

我使用React Quill作为文本编辑器。在我添加自定义图像处理程序之前，这一切正常。如果我添加如下图像处理程序，我将无法在编辑器中输入内容。打字时会失去对每一个按键的注意力。

const modules = {
    toolbar: {
        container: [
            [{'header': [3, 4, 5, 6, false]}],
            ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code'],
            [{color: []}, {background: []}],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
            ['link', 'image'],
            ['clean']
        ],
        handlers: {
            image: imageHandler
        }
    },
    clipboard: {
        // toggle to add extra line breaks when pasting HTML:
        matchVisual: false,
    }
};

function imageHandler() {
    console.log("custom image handler");
}

如果我注释掉image: imageHandler，编辑器就可以完美工作。这是codesanbox 示例

我是否正确编写了自定义模块？

如何在react-quill中设置字符长度？在文档中， getLength() 将返回编辑器中字符的长度。

但我无法弄清楚如何实施它。

我的JSX

<ReactQuill theme='snow' 
                        onKeyDown={this.checkCharacterCount}
                        value={this.state.text}
                        onChange={this.handleChange}
                        modules={modules}
                        formats={formats}
                        //style={{height:'460px'}}
                         />
    // OnChange Handler
    handleChange = (value) =>  {
        this.setState({ text: value })
      }
      
      //Max VAlue checker
      checkCharacterCount = (event) => {
        if (this.getLength().length > 280 && event.key !== 'Backspace') {
            event.preventDefault();
        }
    }

上述解决方案是我在 GitHub 上找到的。但它不起作用...

我遇到了一个有趣的问题。我使用 NextJS 来实现其服务器端渲染功能，并使用 ReactQuill 作为我的富文本编辑器。为了绕过 ReactQuill 与 DOM 的联系，我动态导入它。然而，这提出了另一个问题，即当我尝试将引用附加到 ReactQuill 组件时，它被视为可加载组件而不是 ReactQuill 组件。我需要参考来自定义图像上传到富文本编辑器时的处理方式。现在， ref 返回 current:null 而不是我可以使用 .getEditor() 来自定义图像处理的函数。

有人对我如何解决这个问题有任何想法吗？我尝试了引用转发，但它仍然将引用应用于可加载组件，而不是 React-Quill 组件。这是我的代码的快照。

const ReactQuill = dynamic(import('react-quill'), { ssr: false, loading: () => <p>Loading ...</p> }
);

const ForwardedRefComponent = React.forwardRef((props, ref) => {return (
    <ReactQuill {...props} forwardedRef={(el) => {ref = el;}} />
)})

class Create extends Component {
    constructor() {
        super();
        this.reactQuillRef = React.createRef();
    }

    imageHandler = () => {
         console.log(this.reactQuillRef); //this returns current:null, can't use getEditor() on it.
    } …

我正在尝试使用 React-Quill 文本编辑器制作一个简单的博客。我想获取 ReactQuill Editor 的值并在不同的路由上预览它。很长一段时间以来，我一直在努力实现这一目标，每次我遇到同样的问题时，羽毛笔编辑器在每次按键后都会失去焦点，并在控制台中发出警告，说addRange(): The given range is not in文档。

我观察到一件事。当我只是将道具传递给< CreateBlog />而不应用路线时，它工作得很好。但是一旦我将路由应用到< CreateBlog />组件以便我可以从编辑器中获取值并在不同的路由上预览它，我就开始面临这个问题。我认为反应路由器可能对这种行为负责，但我无法找出确切原因及其修复方法。请帮我。我在下面附上了我的代码以供参考。

应用程序.js：

class App extends Component {

  constructor(){
    super()

    this.state = {
      title: '',
      text: ''
    }

    this.handleBlogTextChange = this.handleBlogTextChange.bind(this)
    this.handleBlogTitleChange = this.handleBlogTitleChange.bind(this)
  }

  handleBlogTextChange(value){
    this.setState({
      text: value
    })
    console.log(this.state.text)
  }

  handleBlogTitleChange(value){
    this.setState({
      title: value
    })
    console.log(this.state.title)
  }

  render(){
    return (
      <BrowserRouter>
        <div class="App">
          <Switch>
            <Route path='/createBlog' component={() => <CreateBlog text={this.state.text} handleBlogChange={this.handleBlogTextChange} /> } />
            <Route …

React-Quill（最新版本，即 2.0.0-beta.2）目前不适用于 React 17。这个包仍然使用 React 16，如果安装了版本 17，则会抛出一大堆错误，如这里所述.

我想知道是否有人对此进行了修复，或者知道何时将 react-quill 更新为与 React 17 一起使用。从 npm 和 github 看来，该软件包最后一次更新是在一年前，并且维护可能已全部放弃（令人遗憾的是，npmjs.com 上的每周下载量略低于 20 万，而且势头强劲）。

或者，如果您知道（或几乎知道）如何手动更新包以与 React 17 一起使用，请在下方发表您的想法。

我是 React-Quill 的新手，我正在使用它来编辑 HTML 模板。我已经有了使用 Spark Post 创建的自定义 API。现在我需要将该 HTML 文件放入此编辑器中，然后用户可以编辑模板并保存它。

当我获取 HTML 数据并将其传递到编辑器时，某些对齐方式、背景颜色和图像大小与原始 HTML 不同。

谁能给我提供一个解决方案，如何改进这个问题？

这是我期望的 HTML 模板。

。。。

这是我从 React-Quill 得到的。

我想将预览作为第一张图像。这是我当前的代码。

import ReactQuill from 'react-quill';

import { PreviewProps } from 'app/event/emails/emailModal/preview/Preview.types';
import { useLocale } from 'hooks/useLocale/useLocale';
import { Heading, Loader, Typography } from 'ui/atoms';
import 'react-quill/dist/quill.snow.css';

import { useStyles } from './Preview.styles';

export const Preview = ({ title, previewData }: PreviewProps) => {
  const classes = useStyles();
  const { formatMessage } = useLocale();

  if (!previewData) …

我正在使用react-quill并且保存了数据，但是，我遇到了一些问题。

1. 保存后如何渲染内容？目前，我只是取回 HTML

2. 我在编辑页面上看到以下内容

这是我的组件

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import "react-quill/dist/quill.snow.css";
import ReactQuill from "react-quill";
import swal from "sweetalert";
import axios from "axios";

import AuthService from "../../Auth/AuthService";
import withAuth from "../../Auth/withAuth";
const Auth = new AuthService();

class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      journal: {}
    };
  }

  componentDidMount() {
    const journalId = this.props.match.params.id;
    axios
      .get("/api/journals/" + journalId)
      .then(result => {
        this.setState({ journal: result.data });
      })
      .catch(error => …

我在构造函数中设置了 Quill 文本编辑器，如下所示：

this.modules = {
            toolbar: {
                container: [
                ...
                [{ 'header': [1, 2, false], 3 }],
                ...]
            }
        };

它会生成一个带有以下名称的下拉菜单：“标题 1”、“标题 2”、“正常”、“标题 3”。

我想保持附加到这些名称的值/函数相同。我只想将名称更改为：“标题”、“副标题”、“段落”、“小段落”。

如何将名称更改为“标题”、“副标题”、“段落”、“小段落”？