scrapooo/quill-resize-module

A module for Quill rich text editor to allow images to be resized.

quill-resize-module's Issues

quill events not triggered when image resized or changes alignment

Great module :)
a side note: if you make everything in English as default, it would be much better for international use.

大佬，发现个问题。

@scrapooo

https://www.vidline.com/share/V0XAEH318G/e2b02eb1105f4a5f4732c9016fa04a99
我明明传参传进去的image带了style="display: block; margin: auto;"
进入quill之后自动删除了这个style样式。
大佬试试修改一下样式然后再传入react quill中，为什么会自动把这段排序删除？

How to lock the resize ratio?

Hi,
I am not able to find how to lock the resize ratio, meaning that when I am resizing I would like the image not to get distorted :)

Resizing not persisting...

I am trying to same the quill editor content, and I am seeing an issue with resized images when the content is being saved. Here is the payload that I am obtaining from QuillJS.

with Q.getContents()

{
   "ops":[
      {
         "insert":" link, then give the meeting Url to any user you are meeting with. All dashboard widgets are movable and resizable for you to create any layout you desire!\\n\\n"
      },
      {
         "insert":{
            "image":"/10095/file-1681228659469.png"
         }
      },
      {
         "insert":{
            "image":"/10095/file-1681228736323.png"
         }
      },
      {
         "insert":" \\n"
      }
   ]
}

And with Q.root.innerHTML

<p>link, then give the meeting Url to any user you are meeting with. All dashboard widgets are movable and resizable for you to create any layout you desire!</p>
<p><br></p>
<p>
   <img src="/10095/file-1681228659469.png" style="width: 45%; float: right;">
   <img src="/10095/file-1681228736323.png" style="width: 45%; float: left;">
</p>

Please see the image tags in particular. In HTML they have width:45%; float:left;

So, when this content is being loaded into the editor again, the images are not resized!!

使用套件無法修改image size

mycode

我的問題是使用套件後，我去log出content 並沒有發生 width變化

import { Quill } from "react-quill";
import ResizeModule from "@ssumo/quill-resize-module";
Quill.register("modules/resize", ResizeModule);

const APP=()=>{
           const [content,setContent]=React.useState("")
             console.log(content)
          const modules = {
              toolbar: [
                  [{ font: [] }],
                  [{ header: [1, 2, 3, 4, 5, 6, false] }],
                  ["bold", "italic", "underline", "strike"],
                  [{ color: [] }, { background: [] }],
                  [{ script: "sub" }, { script: "super" }],
                  ["blockquote", "code-block"],
                  [{ list: "ordered" }, { list: "bullet" }],
                  [{ indent: "-1" }, { indent: "+1" }, { align: [] }],
                  ["link", "image", "video"],
                  ["clean"],
              ],
              resize: {
                  locale: {
                      // 圖片、影片調整大小以及定位功能
                      altTip: "Hold down the alt key to zoom",
                      floatLeft: "Left",
                      floatRight: "Right",
                      center: "Center",
                      restore: "Restore",
                  },
              },
          }
          
          const formats = [
              "header",
              "bold",
              "italic",
              "underline",
              "strike",
              "blockquote",
              "list",
              "bullet",
              "indent",
              "link",
              "image",
              "imageBlot",
              "imageHandler",
              "alt",
              "width",
              "height",
              "size",
              "align",
              "style",
          ];

               return (<ReactQuill
                        theme="snow"
                        value={content}
                        onChange={setContent}
                        modules={modules}
                        formats={formats}
                        placeholder="這邊寫入內容"
                    />)
}

修改图片大家和定位不能触发quill更新

@scrapooo 大佬好，我现在修改图片大家和定位不能触发quill更新，这样话我保存图片大小和位置不对。请问有什么好办法？

https://www.vidline.com/share/V0X85HL5N6/9090c5e86ef8332ec8ae9a08f5113032
视频中我敲回车然后图片位置更新了。

How to save scaled data?

quill.getContents() doesn't contain image zoom data, which means I can't restore in another place

上传图片后改变图片大小和水平位置。但是保存在服务端后大小和位置都不生效

@scrapooo
请问大佬，我上传图片后改变图片大小和水平位置。但是保存在服务端后大小和位置都不生效，请问大佬应该如何解决这个问题？

Cannot be used in React-quill

import React, { useState } from "react";
import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";
// import * as Emoji from "quill-emoji";

import ResizeModule from "@ssumo/quill-resize-module";
Quill.register("modules/resize", ResizeModule);


function App() {
  const [value, setValue] = useState("");
  const toolbarOptions = {
    container: [["bold", "italic", "underline", "strike"], ["emoji"]],
    handlers: { emoji: function() {} },
  };
  
  return (
    <ReactQuill
      theme="snow"
      value={value}
      modules={{
        toolbar: toolbarOptions,
        "emoji-toolbar": true,
        // "emoji-textarea": true,
        "emoji-shortname": true,
        resize: {
          locale: {
            altTip: "按住alt键比例缩放",
            floatLeft: "靠左",
            floatRight: "靠右",
            center: "居中",
            restore: "还原",
          },
        },
      }}
      onChange={setValue}
    />
  );
}

export default App;