inline Editor text color with firefox

[jbParticipant]

Hi!
when using the “inline” jqxEditor widget in Firefox, the text-color doesn’t work as expected.

You can test this using your own demo: “demos/jqxeditor/javascript-editor-inline-editing.htm” in the last paragraph, starting with “Aenean lacinia”

Selecting red makes the text to be green, blue turns black, yellow is green, etc.
My application uses the same inline setup.
Note there is no problem when using “demos/jqxeditor/defaultfunctionality.htm”.

[Peter StoevKeymaster]

Hi jb,

We send commands to the browser and how it handles them depends on its own rendering engine. jqxEditor is simply a toolbar with commands and an IFrame with content editing or DIV tag with contenteditable attribute set to true. Unfortunately, my point is that we would not be able to resolve this.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[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>' };
                                }
                            }
                        }
                    }
            });

[Author]

Posts