我对quill编辑器的反应有问题。
/**
* UserHasHouses
* @ORM\Table(name="user_house")
* @ORM\Entity
*/
class UserHasHouses
{
/**
* @var integer
*
* @ORM\Column(name="id", type="integer")
* @ORM\Id
* @ORM\GeneratedValue(strategy="AUTO")
*/
private $id;
/**
* @ORM\ManyToOne(targetEntity="NameSpace\YourBundle\Entity\House", cascade={"persist"}, fetch="LAZY")
* @ORM\JoinColumn(name="house_id", referencedColumnName="id")
*/
protected $houses;
/**
* @ORM\ManyToOne(targetEntity="NameSpace\YourBundle\Entity\User", cascade={"persist","remove"}, fetch="LAZY" )
* @ORM\JoinColumn(name="user_id", referencedColumnName="id",nullable=true)
*/
protected $users;
/**
* @var \DateTime
* @ORM\Column(name="created_at", type="datetime")
*/
protected $createdAt;
/**
* @var \DateTime
* @ORM\Column(name="updated_at", type="datetime")
*/
protected $updatedAt;
//... add other properties
public function __construct()
{
$this->createdAt= new \DateTime('now');
}
}
效果很好。
但在imageHandler()中，它也不能像州，道具，功能等那样称呼其他人。
我想在imageHandler()中调用由module.toolbar.handlers调用的quillRef
下面是我的简单代码。
imageHandler()
我尝试了很多方法（都失败了）和这种情况，而不是工作
import React, { Component } from 'react';
import ReactQuill from 'react-quill'; // ES6
const formats = [
'header', 'font', 'size',
'bold', 'italic', 'underline', 'strike', 'blockquote',
'list', 'bullet', 'indent',
'link', 'image', 'video'
]
class App extends Component {
constructor(props) {
super(props)
this.state = { text: ''}
this.handleChange = this.handleChange.bind(this)
this.reactQuillRef = null; // ReactQuill component
this.quillRef = null; // Quill instance
}
modules = {
toolbar: {
container: [['bold', 'italic', 'underline', 'blockquote'],
[{'list': 'ordered'}, {'list': 'bullet'}],
['image'],
],
handlers: {
'image': this.imageHandler
}
}
}
componentDidMount() {
this.attachQuillRefs()
}
componentDidUpdate() {
this.attachQuillRefs()
}
attachQuillRefs = () => {
if (typeof this.reactQuillRef.getEditor !== 'function') return;
this.quillRef = this.reactQuillRef.getEditor();
}
imageHandler() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = () => {
const file = input.files[0];
console.log(file); // works well
// problems : can't call ref, props, function... etc
console.log("ref : ", this.reactQuillRef, this.quillRef); // undefine
// this.insertImg(); // not work (insertImg is not a function)
console.log(this.props); // undefine
};
}
handleChange(value) {
this.setState({ text: value });
this.refs.test.innerHTML = this.state.text;
}
insertImg = () => {
console.log("insertImg",prototype);
var range = this.quillRef.getSelection();
let position = range ? range.index : 0;
console.log(this.quillRef); // works well!!!!!!!!! why diffrent with imgHandler()
this.quillRef.insertEmbed(position, 'image','https://images.pexels.com/photos/47480/pexels-photo-47480.jpeg?auto=compress&cs=tinysrgb&h=350');
}
render() {
return (
<div className="App">
<button onClick={this.insertImg}>Insert Img</button>
<ReactQuill value={this.state.text}
onChange={this.handleChange}
modules={this.modules}
formats={formats}
ref={(el) => {this.reactQuillRef = el}}
/>
<br/><br/>
<div contentEditable='true' ref='test'></div>
{this.state.text}
</div>
);
}
}
export default App;至imageHandler() {...}
我的package.json在这里
imageHandler = () => {...}
任何想法为什么？ 有人帮我吗？ 谢谢！
答案 0 :(得分：0)
imageHandler未被调用，因为它未绑定到App组件this。
在对象modules中，this引用modules而非App组件。
保存this参考并在modules对象
模块对象
constructor(){
super();
this.modules = {
toolbar: {
container: [['bold', 'italic', 'underline', 'blockquote'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
['image'],
],
handlers: {
'image': this. imageHandler
}
}
}
}