User login

Creating a word paste plugin for TinyMCE

Ebony-II:tinymce ben$ grep -nHR 'mceCleanup' . | less -S

./jscripts/tiny_mce/classes/EditorCommands.js:651: mceCleanup : fun
./jscripts/tiny_mce/plugins/paste/editor_plugin.js:1:(function(){var Event=tinym
./jscripts/tiny_mce/plugins/paste/editor_plugin_src.js:270:
./jscripts/tiny_mce/themes/advanced/editor_template.js:1:(function(e){var d=e.DO
./jscripts/tiny_mce/themes/advanced/editor_template_src.js:39:
./jscripts/tiny_mce/themes/simple/editor_template.js:1:(function(){var a=tinymce
./jscripts/tiny_mce/themes/simple/editor_template_src.js:60:
./jscripts/tiny_mce/tiny_mce.js:1:var tinymce={majorVersion:"3",minorVersion:"2.
./jscripts/tiny_mce/tiny_mce_jquery.js:1:var tinymce={majorVersion:"3",minorVers
./jscripts/tiny_mce/tiny_mce_jquery_src.js:9684: mceCleanup : fun
./jscripts/tiny_mce/tiny_mce_prototype.js:1:var tinymce={majorVersion:"3",minorV
./jscripts/tiny_mce/tiny_mce_prototype_src.js:10941: mceCleanup : fun
./jscripts/tiny_mce/tiny_mce_src.js:10914: mceCleanup : function()
(END)

(Note: these lines are truncated which is a good thing since the non-source JS files are all one huge line.)

    mceCleanup : function() {
      var ed = this.editor, s = ed.selection, b = s.getBookmark();
      ed.setContent(ed.getContent());
      s.moveToBookmark(b);
    },

./jscripts/tiny_mce/classes/Editor.js:1480: getContent : function(o)

./jscripts/tiny_mce/tiny_mce_jquery_src.js:8298: getContent : fun

./jscripts/tiny_mce/tiny_mce_src.js:4604: getContent : function(s)
./jscripts/tiny_mce/tiny_mce_src.js:5283: getContent : function()
./jscripts/tiny_mce/tiny_mce_src.js:5403: getContent : function()

There is a handle paste event function in Paste plugin. Note how it calls mcePasteWord with a first value of False

_handlePasteEvent : function(e) {
var html = this._clipboardHTML(), ed = this.editor, sel = ed.selection, r;

// Removes italic, strong etc, the if was needed due to bug #1437114
if (ed && (r = sel.getRng()) && r.text.length > 0)
ed.execCommand('delete');

if (html && html.length > 0)
ed.execCommand('mcePasteWord', false, html);

return Event.cancel(e);
},

Paolo extracted how Facebook does their counting, unfortunately it uses the prototype library:

attachments.prototype.start_textarea_interval=function(obj){this.textarea_obj=obj;this.textarea_interval=setInterval(this._textarea_interval_function.bind(this),50);}

attachments.prototype._textarea_interval_function=function(){if(typeof this!='undefined'&&this.textarea_obj&&(!this.attachment_added&&ge(this.view_wrapper_id))){this._auto_scrape_url(this.textarea_obj);}else{this.stop_textarea_interval();}}

attachments.prototype.stop_textarea_interval=function(){clearInterval(this.textarea_interval);}

attachments.prototype._auto_scrape_url=function(obj){if(this.attachment_added){return false;}
if(!this.scrape_last_count){this.scrape_last_count=0;}
if((obj.value.length-this.scrape_last_count)>5||(this.scrape_last_count==0&&obj.value.length>1)){var force=true;}
var url=this._detect_url(obj,force);if(url){if(this._is_fb_code_url(url)){var data={'code':url,'context':this.context};this._attach(true,data,false);}else{this._share_submit_url(url);}}
this.scrape_last_count=obj.value.length;return false;}

On onPaste

Note that the onPaste function, which is apparently an IE extension but worked in both Firefox 3 and Safari 3, does not do anything to capture drag and drop and so doesn't meet our needs.

<textarea cols=60 onpaste="alert('The text is being pasted')">
</textarea>

http://www.java2s.com/Code/JavaScript/Event-onMethod/onPasteExample.htm

Resolution

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.