Froala editor keep indent when pasting code

Question

I'm having some trouble with pasting into Froala. I have a custom code button which adds the <pre><code>Code here</code></pre> tags:

$('textarea[name="description"]').editable({
    customButtons: {
        insertCode: {
            title: 'Insert code',
            icon: {
                type: 'font',
                value: 'fa fa-code'
            },
            callback: function() {
                if (!this.selectionInEditor()) {
                    this.$element.focus(); // Focus on editor if it's not.
                }

                var html = '<pre><code>' + (this.text() || '&#8203;') + '</code></pre>';

                this.insertHTML(html);
                this.saveUndoStep();
            }
        }
    }
});

I would like to be able to paste code into the editor, remove the styling but keep the linebreaks and indent. Similiar as here on SO with CNTL+K. Is this possible?

Answer 1

You should replace this.text() with something that gets the selected HTML and not the selected text. Froala WYSIWYG Editor doesn't has such mechanism, but you could use the answer from Get Selected HTML in browser via Javascript question.