javascript - 如何在 quill image Handler 中向图像元素添加类?
问题描述
我在反应项目中有羽毛笔编辑器,并且图像处理程序用于上传图像,但我必须在羽毛笔编辑器中为所有图像元素添加类。这是我的图像处理程序代码
imageHandler() {
let self=this
const Cryptr = require('cryptr');
const cryptr = new Cryptr(key);
const users = localStorage.getItem('users') ? JSON.parse(cryptr.decrypt(localStorage.getItem('users'))) : {}
let loggedinUser = users[users.lastLoginId];
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = async () => {
const file = input.files[0];
const formData = new FormData();
// const formData = new FormData();
formData.append('image', file);
const config = {
headers: {
'content-type': 'multipart/form-data',
'x-access-handler': loggedinUser.token
}
};
const res = new Promise(function(resolve, reject) {
axios.post(API_URL + 'api/v1/postblogimage', formData, config)
.then((response) => {
if (response.data.error == 'false' || response.data.error == false) {
if (response.data.status == 200 && response.data.message == "Image uploaded successfully") {
const range = self.quill.getSelection(true);
// Insert temporary loading placeholder image
// this.quill.insertEmbed(range.index, 'image', `${window.location.origin}/images/loaders/placeholder.gif`);
// Move cursor to right side of image (easier to continue typing)
self.quill.setSelection(range.index + 1);
// Remove placeholder image
self.quill.deleteText(range.index, 1);
// Insert uploaded image
self.quill.insertEmbed(range.index, 'image', response.data.data[0].imageURL);
}
}
// }
}).catch((error) => {
// reject(Error("It broke"));
});
});
};
}
有人可以帮我解决这个问题,因为我已经尝试了很长时间并且没有成功。任何帮助或建议将不胜感激。
解决方案
一种解决方法是更改formats/image
模块中的类名
import ReactQuill, { Quill } from "react-quill";
var Image = Quill.import('formats/image');
Image.className = 'custom-class-to-image';
Quill.register(Image, true);
import React, {useRef, useState, useEffect} from "react";
import ReactDOM from "react-dom";
import ReactQuill, { Quill } from "react-quill";
import 'react-quill/dist/quill.snow.css';
import "./styles.css";
var Image = Quill.import('formats/image');
Image.className = 'custom-class-to-image';
Quill.register(Image, true);
function App() {
const [value, setValue] = useState('');
const ref = useRef(null);
useEffect(() => {
if(ref && ref.current) {
const quill = ref.current;
const editor = quill.getEditor();
editor.insertEmbed(0, 'image', 'https://i.picsum.photos/id/211/200/300.jpg')
}
}, [ref])
return (
<div className="App">
<ReactQuill
ref={ref}
theme="snow"
value={value}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
推荐阅读
- python-3.x - 在面部关键点上训练 SVM - 如何将特征转换为正确的形状?
- php - PHP 菜单选择选项值
- php - curl exec 504 网关超时
- python - pytest.raises 通过错误异常
- java - 传递一个类以在方法中创建一个新对象
- php - 执行 php artisan 迁移后符号链接太多?
- r - 在 R 中拟合 ODE 模型中的特定参数集
- r - 在 RStudio 中为项目创建模板
- image-processing - Imagemagick 类似 Spotify 的双色调叠加
- php - 从 MongoDB 中的 Document (PHP) 中检索深度嵌套的子文档