Question

I am trying to insert a button into HtmlEditor’s ToolBar. Button should get selected text by mouse or keyboard and add ‘#’ character at the start of that selected text for locating it as a url.

As i understand the best solution is creating a plugin for adding buttons into html editor toolbar. I found creation codes but the problem is; how can i get selected text? Ext-js version 2.2

And there is the code that provides to create a plugin for html editor toolbar button:

Ext.ns('Ext.ux.form.HtmlEditor');

    Ext.ux.form.HtmlEditor.NewLine = Ext.extend(Ext.util.Observable, {
        init:function (cmp) {
            this.cmp = cmp;
            this.cmp.on('render', this.onRender, this);
        },
        onRender:function () {
            this.cmp.getToolbar().addButton([
                {
                    iconCls:'newline', //your iconCls here
                    handler:function () {
                        this.cmp.insertAtCursor('<br>&nbsp;');

                    },
                    scope:this
                }
            ]);
        }
    });

Answer 1

You can get the selected text like this: window.getSelection()

That gives you a Selection object. If you want to get the text only: window.getSelection().toString()

but if you want to make stuff bold or something, you need to check if the selection is inside the editor. Everything you need for that is inside the selection object.

=> correction: the htmlEditor uses an iframe you can get the iframe window by the getWin function.

Note that this is only for modern browser (not < IE9) judging from the legacy Ext version you use, that might be an issue for you… but there are workarounds for IE.

more info