CODEWITHSUNDEEP
javascriptcleditor
Help Inspire
Help Inspire

Reputation: 366

CLEditor, pasting content as text functionality in main window

I am using CLEditor, http://premiumsoftware.net/cleditor/, for my text editor. There is a function for 'paste as text' that when the button is clicked a pop up window appears with a textarea to paste your content in and the styles are stripped out.

What I would like to do is take this same functionality, but anytime someone paste into the primary textarea this action is performed automatically. How would I trigger this?

I have created a JS Fiddle, http://jsfiddle.net/helpinspireme/naubS/, but was unable to paste all the JS in there so to link to the main JS file for CLEditor visit their site: http://premiumsoftware.net/cleditor/

Thank you for your help.

Upvotes: 2

Views: 1512

Answers (2)

Nicolas Giszpenc
Nicolas Giszpenc

Reputation: 703

When pasting into cleditor, the editor picks up all the html from the source. I ended up editing jquery.cleditor.js and added a bind function to the $doc.click(hidePopups) function. I used setTimeouts to allow the text to populate the input and the updateTextArea function to complete.

    .bind("paste", function() {
            setTimeout(function() {
                refreshButtons(editor);
                updateTextArea(editor, true);
                //remove any and all html from the paste action
                setTimeout(function() {
                    //clean up the html with removeHtml function
                    $(editor.doc.body).html(removeHtml($(editor.doc.body).html()));

                    //change the input value with new clean string
                    $("#" + editor.$area[0].id).val($(editor.doc.body).html());
                }, 100);
            }, 100);
        })

I use the removeHtml function below to remove all the HTML from the pasted content.

//remove html altogether
function removeHtml(str) {
    var regex = /(<([^>]+)>)/ig;
    var result = str.replace(regex, "");
    return result;
}

This solution is now in production.

Upvotes: 0

dvtoever
dvtoever

Reputation: 3996

I am aware that I am not answering your actual question, but in case your real problem is the garbage generated by a user who tries pasting text from Microsoft Office (Word for example) I would recommend to consider an alternative solution.

The CLEditor itself can switch between an iFrame (rich text mode) and a textarea (source mode). The 'Paste as text' functionality makes use of a textarea which does not support rich text by ifself, so it will not allow garbage html in the first place.

However if the editor is in rich text mode, it is very difficult to prevent a user pasting from Word (he can use the regular paste button, press CTRL-V or even use the right-mouse button context menu, which are all different events and hard to intercept using javascript). So now the damage is already done; you have messy html inside your editor. So instead of trying to sanitize the garbage produced by Word I implemented the following check (javascript) upon saving the captured input:

if(clEditorValue && (clEditorValue.indexOf('<!--') !== -1 || clEditorValue.indexOf('mso-ansi-language') !== -1 ) ) {
  alert('Unable to process text pasted from Word, please use "Paste as text" or modify your input');
  return;
}

I hope this answer is useful for other people trying to achieve the same.

Upvotes: 3

Related Questions