标签: react-quill

如何在react-quill编辑器中获取已删除的图像url

我正在使用react-quill，我想知道如何image在插入编辑器后选择一个，以及如何url在删除后获取已删除的图像。

这是我的编辑器组件

import React,{useState} from 'react'
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const modules = {
    toolbar:{
        container: [
            [{ 'header': [1, 2, false] }],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
            ['link', 'image'],
            ['clean']
          ],
          

          handlers:{
            'image': async function(){
                const editor = this.quill
                
                const input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
                input.click();

                input.addEventListener('change', (e) => {
                    const url = awiat uploadFile(e.target.files[0))
                    const range = editor.getSelection(true);
                    editor.insertEmbed(range.index, 'image', …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs quill react-quill

use*_*989

2023 10-16

5
推荐指数

1
解决办法

2281
查看次数

Nextjs：如何仅在客户端渲染上将 quill-blot-formatter 注册到动态导入的react-quill？

我react-quill仅使用ssr: false. 我的功能组件工作正常，我想将quill-blot-formatter包添加到modules我的鹅毛笔组件的一部分。

我的第一个障碍是，我无法注册它，quill-blot-formatter如图Quill所示：

ServerError
ReferenceError: document is not defined

Run Code Online (Sandbox Code Playgroud)

该页面是客户端呈现的，因此我不明白这个错误来自哪里！

这是我的代码：

import dynamic from "next/dynamic";
import BlotFormatter from "quill-blot-formatter";

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

Quill.register("modules/blotFormatter", BlotFormatter);

Run Code Online (Sandbox Code Playgroud)

在这里，我不明白如何让它Quill动态导入react-quill。因此，我认为这Quill.register是行不通的。现在，我如何quill-blot-formatter注册react-quill？在使用React-quill 的 Next.js 示例之后，我什至没有像ReactQuill包中的默认导出那样导入 React-quill 。

然后我blotFormatter像这样声明了该模块。

const modules = {
    blotFormatter: {},  // here
    toolbar: [
        [{header: …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs quill next.js react-quill

for*_*est

lucky-day

5
推荐指数

1
解决办法

2070
查看次数

如何在 react-quill 中注册对齐样式

我正在使用react- quill npm 包并在 nextjs 中动态导入它，我也在使用 create-next-app 样板。我能够让 react-quill 编辑器工作，但我无法获得使用工具栏中的对齐按钮设置的图像样式/段落样式并重新显示内容 - 图像/段落。

用例：

添加图像/段落并从编辑器的工具栏中添加对齐方式。
将编辑器内容保存在数据库中
使用 npm 包htmr从数据库中重新显示 react- quill编辑器的内容

预期：图像/段落内容仍应右对齐/居中/对齐。

实际：图像/段落内容已删除所有样式属性。

下面是我的代码，如何在nextjs中为react-quill的图像/段落注册样式是我的问题

import { useState,useEffect } from 'react'
import Router from 'next/router'
import dynamic from 'next/dynamic' 
import { withRouter } from 'next/router'   // used to get access to props of react-dom
import { getCookie,isAuth } from '../../actions/auth';
import { createBlog }  from '../../actions/blog'

// dynamically importing react-quill  
const ReactQuill = dynamic( ()=> import('react-quill'), {ssr:false} ) …

Run Code Online (Sandbox Code Playgroud)

reactjs server-side-rendering next.js react-quill

jar*_*vak

lucky-day

3
推荐指数

1
解决办法

2230
查看次数

如何在鹅毛笔工具栏中添加自定义图标

我在我的 React Native 应用程序中使用 Quill 作为文本编辑器。我想在羽毛笔工具栏中添加自定义工具栏图标，有什么解决方案吗？我的代码是：

quill.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
      html,body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color:rgba(0, 0, 0, 0);
      }
      #editor {
        height: calc(100% - 72px);
        background-color:rgba(0, 0, 0, 0);
      }
    </style>
    <link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.snow.css"></link>
  </head>
  <body>
    <div id="editor"></div>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"
      integrity="sha512-P2W2rr8ikUPfa31PLBo5bcBQrsa+TNj8jiKadtaIrHQGMo6hQM6RdPjQYxlNguwHz8AwSQ28VkBK6kHBLgd/8g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      const quill = new Quill('#editor', window.options);
      quill.on('text-change', function (delta, oldDelta, source) {
        const html = document.querySelector('#editor').children[0].innerHTML; …

Run Code Online (Sandbox Code Playgroud)

quill react-native react-quill

Shi*_*vam

2023 09-29

3
推荐指数

1
解决办法

9765
查看次数

如何从 React Quill 导入 css？

我正在使用react制作一个公告板。\nPOST编辑器使用React Quill并正常保存到服务器。\nQuill编辑器中使用的css很好地反映并保存到服务器，但是当导入并显示在屏幕上时， css 无法正常工作。\n如何导入 Quill 的 css 文件？

此代码将使用 Quill 保存的 HTML 文本解析为危险的SetInnerHTML。

 <div className="view" dangerouslySetInnerHTML={{ __html: data?.content }}></div>\n

Run Code Online (Sandbox Code Playgroud)\n

这段代码是我在 Quill 中编写的代码的片段。

<p class="ql-align-center">\n  <img src="https://myrecord.s3.ap-northeast-2.amazonaws.com/e2c36fce-8ce0-4ae8-a188-9ca549ebe2ea.jpg">\n</p>\n<p class="ql-align-justify">\n  <span class="ql-size-huge">1\xec\xb0\xa8&nbsp;\xec\x84\xb8\xea\xb3\x84&nbsp;\xeb\x8c\x80\xec\xa0\x84\xec\x9d\x98&nbsp;\xeb\xb0\x9c\xeb\xb0\x9c\xea\xb3\xbc&nbsp;\xeb\xaf\xb8\xea\xb5\xad</span>\n</p>\n

Run Code Online (Sandbox Code Playgroud)\n

如何导入带有ql-align-center,的 css 文件ql-align-justify？

html css reactjs quill react-quill

sun*_*l13

lucky-day

3
推荐指数

1
解决办法

7756
查看次数

ReactQuill - 如何设置占位符属性的样式？

我想对分配给占位符属性的文本进行样式设置并使其字体大小更大。我如何使用 ReactQuill 做到这一点？

          <ReactQuill placeholder= "some fun text" onChange = {onContentChange} value={contentValue} theme="snow" style={{

            height:"300px",
            padding:"20px",
            lineHeight:"0px",

          }}/>

Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-quill

Wil*_*iam

lucky-day

2
推荐指数

1
解决办法

8678
查看次数