问题描述
我正在使用react-quill作为我的编辑器，最近我配置了图像处理程序函数以将prop传递给处理程序，并且在进行更改后，我的编辑器的行为很奇怪，并且每当我在其他输入字段上键入内容时，我的编辑器就会进入焦点并自动键入单词 以下是我的编辑器的代码 请任何帮助或建议，将不胜感激。
Component
} from 'react';
// import {
// Editor
// } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import axios from 'axios'
import {
API_URL
} from './../../api_url'
// import * as Icons from 'images/icons';
import * as loadImage from 'blueimp-load-image';
import {
key
} from '../../assets/encryptionkey'
import globalStyles from '../../stylesheets/ui.css'
import blogStyles from './blogs.css'
import bootstrapStyles from '../../stylesheets/bootstrap/css/bootstrap.min.css'
import fontAwesomeStyles from '../../stylesheets/font-awesome/css/font-awesome.min.css'
import actionIconsstyles from '../../stylesheets/action_icons.css'
import cx from 'classnames'
import './editor.css';
import s from './editor.css';
//import CKEditor from '@ckeditor/ckeditor5-react';
//import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
//import Reactquill,{ quill } from "react-quill";
//var Image = quill.import('formats/image');
//Image.className = 'custom-class-to-image';
//quill.register(Image,true);
export default class BlogEditor extends Component {
constructor( loader ) {
super();
this.state = {
editorHtml: '',theme: 'sNow',text:''
}
this.handleChange = this.handleChange.bind(this)
// var that=this;
if (typeof window !== 'undefined') {
this.Reactquill = require('react-quill')
const Reactquill=this.Reactquill;
var Image = Reactquill.quill.import('formats/image');
Image.className = 'blog-content-image';
Reactquill.quill.register(Image,true);
// Reactquill.quill.setContents(editor.clipboard.convert(html));
}
}
componentwillReceiveProps(){
//debugger
let clearContent=this.props.clearContent
if(clearContent){
// this.editorRef.setEditorContents(this.editorRef.getEditor(),'<h1>test</h1>');
}
}
handleChange(value) {
//debugger
this.setState({ text: value })
// this.props.changeInEditor(value)
}
imageHandler({ val,componentProps }) {
// debugger
let self=this
let image;
let image_extension;
const Cryptr = require('cryptr');
const cryptr = new Cryptr(key);
const users = localStorage.getItem('users') ? JSON.parse(cryptr.decrypt(localStorage.getItem('users'))) : {}
// console.log(users[users.lastLoginId])
let loggedinUser = users[users.lastLoginId];
const input = document.createElement('input');
input.setAttribute('type','file');
input.setAttribute('accept','image/*');
input.setAttribute("class","Editor-mage");
input.click();
input.onchange = async () => {
//debugger
const file = input.files[0];
var ValidImageTypes = ["image/gif","image/jpeg","image/png","image/jpg","image/GIF","image/JPEG","image/PNG","image/JPG"];
let file_type = file.type
let filename = file.name
let extension = filename.split('.').pop();
if(ValidImageTypes.indexOf(file_type) >= 0){
if(file.size<=500000&&file.size>=50000){
var filetoLoad = file
loadImage(filetoLoad,(canvas) => {
if(canvas){
// this.setState({
image=canvas.toDataURL()
image_extension=extension
//});
const res = new Promise(function(resolve,reject) {
axios({
method:'post',url:API_URL+'api/v1/postblogimage',headers:{
'x-access-handler':loggedinUser.token
},data:{
image: image,image_extension:image_extension,userid:loggedinUser.userid
}
})
//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") {
//debugger
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
let url=response.data.data[0].imageURL;
self.quill.insertEmbed(range.index,url);
self.quill.pasteHTML(range.index,<img src={url} class="blog-image-content" alt="Responsive image"/>);
}
}else if(response.data.error == 'true' || response.data.status == '500')
componentProps.error('Sorry,Inappropriate image')
// }
}).catch((error) => {
// reject(Error("It broke"));
});
});
}
},{orientation: true});
}
else{
componentProps.error(" Sorry,File size should be of size between 50 kb to 500kb")
}
}
else{
// this.setState({
// image_warning:'Invalid image type',// image:'',// image_extension:''
//})
// this.fileInput.value=''
}
};
}
render() {
const Reactquill = this.Reactquill
if (typeof window !== 'undefined' && Reactquill) {
return (
<div className="editor-container">
<Reactquill
ref={(el) => this.quillRef = el
}
onChange={this.handleChange}
placeholder={"share your thoughts"}
modules={{
toolbar: {
container: [
[{ header: '1' },{ header: [2,3,4,5,6] },{ font: [] }],[{ size: [ 'small',false,'large','huge' ] }],['bold','italic','underline','strike','blockquote'],[{ list: 'ordered' },{ list: 'bullet' }],['link','video'],['clean'],['code-block'],[{ 'color': [] },{ 'background': [] }],// dropdown with defaults from theme
[{ 'align': [] }],],handlers: {
image: (val) => this.imageHandler({ val,componentProps: this.props })
// image: () => this.imageHandler
}
}
}}
/>
</div>
)
}
else {
return <textarea />;
}
}
}```
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）