angyLe
7/20/2017 - 1:00 PM

example of redactor plugin

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>
        }
    }