META-INF.resources.primefaces.texteditor.1-texteditor.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of primefaces Show documentation
There is a newer version: 15.0.0-RC1
/**
 * __PrimeFaces TextEditor Widget__
 * 
 * Editor is an input component with rich text editing capabilities based on [Quill](https://quilljs.com/).
 * 
 * @prop {boolean} disabled Whether this text editor is disabled.
 * @prop {Quill} editor The current Quill text editor instance.
 * @prop {JQuery} editorContainer The DOM element for the container with the Quill editor.
 * @prop {JQuery} input The DOM element for the hidden input field with the current value.
 * @prop {JQuery} toolbar The DOM element for the toolbar of the editor.
 * 
 * @interface {PrimeFaces.widget.TextEditorCfg} cfg The configuration for the {@link  TextEditor| TextEditor widget}.
 * You can access this configuration via {@link PrimeFaces.widget.BaseWidget.cfg|BaseWidget.cfg}. Please note that this
 * configuration is usually meant to be read-only and should not be modified.
 * @extends {PrimeFaces.widget.DeferredWidgetCfg} cfg
 * @extends {ExpandedQuillOptions} cfg
 * 
 * @prop {boolean} cfg.disabled Whether this text editor is initially disabled.
 * @prop {boolean} cfg.toolbarVisible Whether the editor toolbar should be displayed.
 */
PrimeFaces.widget.TextEditor = PrimeFaces.widget.DeferredWidget.extend({

    /**
     * The default HTML template for the toolbar of the editor. Use the appopriate classes to insert a toolbar button.
     * @type {string}
     */
    toolbarTemplate: '' +
                '' +
                    '' +
                    '' +
                '' +
                '' +
                    '' +
                    '' +
                    '' +
                    '' +
                '' +
                '' +
                    '' +
                    '' +
                '' +
                '' +
                    '' +
                    '' +
                '' +
                '' +
                    '' +
                    '' +
                    '' +
                    '' +
                '' +
                '' +
                    '' +
                    '' +
                    '' +
                    '' +
                '' +
                '' +
                    '' +
                    '' +
                '' +
                '' +
                    '' +
                    '' +
                    '' +
                '' +
                '' +
                    '' +
                '' +
            '',

    /**
     * @override
     * @inheritdoc
     * @param {PrimeFaces.PartialWidgetCfg} cfg
     */
    init: function(cfg) {
        this._super(cfg);
        this.disabled = (cfg.disabled === undefined) ? false : cfg.disabled;

        this.editorContainer = $(this.jqId + '_editor');
        this.input = this.jq.children('input');

        if (this.disabled) {
            this.input.attr("disabled", "disabled");
            this.jq.addClass("ui-state-disabled");
            this.cfg.readOnly = true;
        }

        this.renderDeferred();
    },

    /**
     * @include
     * @override
     * @protected
     * @inheritdoc
     */
    _render: function() {
        var $this = this;

        //toolbar
        this.toolbar = $(this.jqId + '_toolbar');
        if(!this.toolbar.length && this.cfg.toolbarVisible) {
            this.jq.prepend(this.toolbarTemplate);
            this.toolbar = this.jq.children('.ui-editor-toolbar')
            this.toolbar.attr('id', this.id + '_toolbar');
        }

        //configuration

        this.cfg.theme = 'snow';
        this.cfg.modules = {
            toolbar: this.cfg.toolbarVisible ? PrimeFaces.escapeClientId(this.id + '_toolbar') : false
        };

        //initialize
        this.editor = new Quill(PrimeFaces.escapeClientId(this.id) + '_editor', this.cfg);

        var events = ["keyup", "keydown", "click", "dblclick", "keypress", "mousedown", "mousemove", "mouseout",
                        "mouseover", "mouseup"];

        $.each(events, function(index, value) {
            $this.registerEvent(value);
        });

        //set initial value
        this.input.val(this.getEditorValue());
        
        //update input on API change
        this.editor.on('text-change', function(delta, oldDelta, source) {
            if (source !== 'user') {
                $this.input.val($this.getEditorValue());
                $this.callBehavior('change');
            }
        });

        this.editor.on('selection-change', function(range, oldRange, source) {
            if(range && !oldRange) {
                $this.callBehavior('focus');
            }
            if(!range && oldRange) {
                $this.callBehavior('blur');

                // Handle change event here, quilljs text-change behaves more like an 'input' event
                if ($this.input.val() !== $this.getEditorValue()) {
                    $this.input.val($this.getEditorValue());
                    $this.callBehavior('change');
                }
            }
            if(range && oldRange) {
                $this.callBehavior('select');
            }
        });

        // QuillJS doesn't handle blurring when focus is lost to e.g. a button, handle blur event separately here as a workaround
        // See https://github.com/quilljs/quill/issues/1397
        this.editor.root.addEventListener('blur', function(e) {
            // Ignore if focus has been lost to the toolbar or user pasting
            if ($this.cfg.toolbarVisible && $this.toolbar[0].contains(e.relatedTarget) || e.relatedTarget === $this.editor.clipboard.container) {
                return;
            }

            $this.editor.blur(); // Triggers selection-change event above
        });
    },

    /**
     * Sets the content of the editor, the hidden input and calls the change behavior.
     * @param {string} value New value to be set
     */
    setValue: function(value) {
        this.editor.setText(value);
        this.input.val(this.getEditorValue());
        this.callBehavior('change');
    },

    /**
     * Finds an returns the current contents of the editor.
     * @return {string} The current contents of the editor, as an HTML string.
     */
    getEditorValue: function() {
        var html = this.editorContainer.get(0).children[0].innerHTML;
        var value = (html == '
') ? '' : html;

        return value;
    },

    /**
     * Clears the entire text of the editor.
     */
    clear: function() {
        this.editor.setText('');
    },

    /**
     * Registers an event with the Quill editor and invokes the appropriate behavior when that event is triggered.
     * @private
     * @param {string} event Name of the event to register. 
     */
    registerEvent: function(event) {
        var $this = this;
        if(this.hasBehavior(event)) {
            this.editorContainer.on(event, function () {
                $this.callBehavior(event);
            });
        }
    },

    /**
     * Enables this text editor so that text can be entered.
     */
    enable: function () {
        this.editor.enable();
        PrimeFaces.utils.enableInputWidget(this.jq, this.input);
        this.disabled = false;
    },

    /**
     * Disables this text editor so that no text can be entered or removed.
     */
    disable: function () {
        this.editor.disable();
        PrimeFaces.utils.disableInputWidget(this.jq, this.input);
        this.disabled = true;
    }

});