[kominedParticipant]

Here’s a working solution for anyone who gets this error. It’s surprising that the jqx team didn’t think this was resolvable using the existing framework. I think the issue probably relates to their use of an iframe for the normal editor (where this functionality works correctly) and lack of iframe in the inline editor.

PS I make no warranty claims on the cross-browser support of getSelectedCommentText(). It gets the current selection in the window (which if you are using the inline editor, to use the formatting tools you must be selected in the editor and the selection is guaranteed to be within the editor). If you find issues with this function, you can use a library like Rangy which has cross-browser support.

            function getSelectedCommentText() {
                var win = this,
                  doc = document || this.document,
                  text = "";
                if (win.getSelection) {
                    text = win.getSelection().toString();
                } else if (doc.selection && doc.selection.type != "Control") {
                    text = doc.selection.createRange().text;
                }
                return text;
            }

            $('#editor').jqxEditor({
                tools: 'bold italic underline | textcolor | clean',
                createCommand: function (name) {
                    switch (name) {
                        case "textcolor":
                            return {
                                type: 'colorPicker',
                                tooltip: 'Text Color',
                                init: function (widget) {
                                    widget.jqxDropDownButton({ });
                                    widget.jqxDropDownButton('setContent', '<div unselectable="on" style="z-index: 55;"><div unselectable="on" class="jqx-editor-toolbar-icon jqx-editor-toolbar-icon-forecolor"></div><div style="background: rgb(0, 0, 0) none repeat scroll 0% 0%;" id="bar-forecolor" unselectable="on" class="jqx-editor-color-bar"></div></div>');
                                },
                                action: function (widget, editor) {
                                    var color = widget.val();
                                    return { command: 'inserthtml', value: '<span style="color: ' + color + '">' + getSelectedCommentText() + '</span>' };
                                }
                            }
                        }
                    }
            });

[kominedParticipant]

Here is an example illustrating the bug:

https://www.jseditor.io/?key=jqxkanban-updateitem-bug

[Author]

Posts