example of redactor plugin
/*
<LastChange
setLastChange = {this.setLastChange}
handleEditbleItemChange = {this.props.handleEditbleItemChange
wasSaved = {this.props.wasSaved}
/>
*/
class LastChanged extends React.Component {
constructor(props) {
super(props);
this.renderChildren = this.renderChildren.bind(this);
this.onButtonClick = this.onButtonClick.bind(this);
this.pluginInit = this.pluginInit.bind(this);
this.initFlag = 0;
this.redactor;
this.buttonName = 'lastModified';
}
pluginInit() {
let self = this;
if (this.initFlag === 0)
{
$.Redactor.prototype.lastModified = function () {
return {
init: function () {
self.redactor = this;
let innerHtml = self.changeIcon(self.props.setLastChange);
let button = this.button.addAfter('fullscreen', self.buttonName, innerHtml);
this.button.addCallback(button, self.onButtonClick);
}
};
};
this.initFlag = 1;
}
}
onButtonClick() {
let self = this;
let value = self.props.setLastChange === false ? true : false;
this.props.handleEditbleItemChange('setLastChange', value, function () {
let button = self.redactor.button.get(self.buttonName);
let innerHtml = self.changeIcon(value);
button[0].innerHTML = innerHtml;
});
}
// change icons of button
changeIcon(setLastChange) {
let icon = setLastChange === true ? "fa fa-check-circle-o" : "fa fa-circle-o";
let buttonText = "Merk <br>som nytt";
return '<span class="setLastChangeButton" data-toggle="tooltip" title="' + buttonText + '"><i class="' + icon + '" aria-hidden="true"></i>Merk som nytt</span>';
}
renderChildren(children) {
let self = this;
return React.Children.map(children, child => {
if (child)
return React.cloneElement(child, {
})
else
return child
})
}
componentWillUnmount() {
this.initFlag = 0;
}
render() {
this.pluginInit();
return <div>{this.renderChildren(this.props.children)}</div>
}
}