Topic: Strip Formatting from Pasted Text
I'm working on a script that strips the formatting from text when users cut content from outside sources, like a Word docx or another web page, and then paste the content into tinymce.
I've got it working in a plain <textarea> but I can't figure out how to access the content when it's inside a tinymce editor, or how to listen for click events inside tinymce's content area.
I'm using jQuery to record the keydown() cursor position and the keyup() cursor position. If the script detects multiple characters have been input between these two cursor points, then it uses regex to strip all the formatting in between.
If I can just figure out how to listen for tinymce click events and access the content from inside tinymce, I can finally get everything working.
Here's my code, along with some additional inline notes:
jQuery(function($) {
$(document).ready(function() {
//timeout set to prevent script from running before tinymce has completely loaded
setTimeout(SPF.run, 3000);
});
var SPF = {};
SPF.run = function() {
//initialize vars
var _this = this;
_this.startPos = 0; //capture keydown() cursor position
_this.endPos = 0; //capture keyup() position
_this.strVal = ''; //string length in between cursor points
alert('hi'); //this alert fires successfully after setTimeout executes
$('#tinymce').keydown(function(e) {
alert('hi'); //this alert does not fire, as jQuery doesn't seem aware of actions in tinymce
_this.startPos = getCursorPosition($(this));
})
.keyup(function(e) {
_this.endPos = getCursorPosition($(this));
//grab the newest input values
_this.strVal = $('.mceContentBody').text().substring(_this.startPos, _this.endPos);
//only process if multiple chars have been input
if(_this.strVal.length >= 5) {
//strip unwanted formating
_this.strVal = _this.strVal.replace(/<.*?>/g, '');
$('.mceContentBody').text(_this.strVal);
alert(_this.strVal);
}
});
};
//grab cursor points
getCursorPosition = function(editor) {
var input = editor.get(0);
if (!input) return; // No (input) element found
if ('selectionStart' in input) {
// Standard-compliant browsers
return input.selectionStart;
} else if (document.selection) {
// IE
input.focus();
var sel = document.selection.createRange();
var selLen = document.selection.createRange().text.length;
sel.moveStart('character', -input.value.length);
return sel.text.length - selLen;
}
};
});Aside, if anyone can offer a more elegant solution to delay the SPF.run() function from running until tinymce has finished loading, I'd appreciate it. I've tried several things, but all I've had success with is the setTimeout() method.
Last edited by bbuster79 (2012-06-07 03:25:18)