Pasting from word #124
Comments
|
After updating to 1.2.0 i see it does a much better job. |
|
Well, I suppose it is a sign it's actually being used! Joking aside - there's a similar issue open #86. 1.2.0 should be doing a better job as it has a strict set of tags it allows - via angular-sanitize/textAngular-Sanitize ngSanitize directive, which will fix most of the weird tags like On the other hand, 'cleansing' content on paste is a big missing feature so it is on my list, just not directly next. For Reference when I start work:
|
|
Another potential solution is to use textarea and browsers handle the plain text formatting automatically during pasting. Still trying if this works with textAngular. |
|
Yes that's the easiest option, but then from what I've read most people pasting from word will want all that nice pretty formatting they put in. So your solution may do for a good starting point but I have a feeling it won't make the issue go away. |
|
As a stop-gap the most recent commit to the repo is stripping out all html tags and inserting only plain text. In theory this should strip out all the ms-word formatting indiscriminately. I'll work on the ms-word parts later. |
|
@SimeonC i think that commit has broken paste in ie9. I cannot paste anything, effect of pasting is "nothing happens". |
|
Bother, thanks for letting me know - I'll have a look. In theory it covered IE, but IE is IE. :( |
|
Yeh. IE... the reason web developers become project managers. A little background, I upgraded because of another IE issue we were seeing (before upgrading) where pasting content in wasn't triggering the validator, that is the required field validator for the field wasn't changing to valid. Version 1.2.0 it says in the file. Subsequent manual edits to the field dont fix the validation either, it gets into some kind of bad state... Hey you should have some donation thing, i feel bad raising ie bugs. |
|
No worries about IE bugs - I said we'd support it so I'd better do what I said! I tested it and can paste in IE fine (using v1.2.1-pre1 and the bundled demo/static-demo.html). Possibly something specific about what you're pasting in? Also of fair importance is do you have jQuery loaded or not? I recently discovered this can cause some very strange issues when you assume jQuery and jQLite both function identically (except the obvious exceptions) which isn't always true... I'm testing via browser stack (which is slow as a wet week today) so copy-paste for me is a bit limited to plain text it seems. The code I added in to handle paste is as follows, you might be able to spot anything I've missed as you probably work with IE js more than I do. var text;
// for non-ie
if(e.clipboardData || (e.originalEvent && e.originalEvent.clipboardData))
text = (e.originalEvent || e).clipboardData.getData('text/plain');
// for ie
else if($window.clipboardData)
text = $window.clipboardData.getData('Text');
// if theres non text data and we aren't in read-only do default
if(!text && !_isReadonly) return true;
// prevent the default paste command
e.preventDefault();
if(!_isReadonly){
var _working = angular.element('<div></div>');
_working[0].innerHTML = text;
// this strips out all HTML tags
text = _working.text();
document.execCommand('insertText', false, text);
ngModel.$setViewValue(_compileHtml());
} |
|
Hi @SimeonC In your test did you happen to check whether required validators were passing after a paste? |
|
Yes I did, in /demo/static-demo.html I changed the form test in there to be: <form name="validationForm">
<label for="name">Name:</label> <input type="text" tabindex="1" id="name" ng-model="name">
<label for="website">Website:</label> <input type="url" tabindex="2" id="website" ng-model="website">
formValid: {{validationForm.testValidation.$pristine}} {{validationForm.testValidation.$valid}} {{validationForm.testValidation.$dirty}} {{validationForm.testValidation.$invalid}}
Bio: <div text-angular name="testValidation" ng-model="bio" tabindex="3" required></div>
</form>That worked fine, I just didn't bother commiting it in yet. There seems to be a problem in IE with it detecting whether it's blank or not when leaving with the wrapping function which in turn causes it not to set invalid. |
|
OK I am having more success with this code (tested in IE9 and IE10). From I have read here - http://stackoverflow.com/questions/3398378/execcommand-inserthtml-in-internet-explorer this is the way to do it in the IE of yesteryear. If you're testing in IE11 then i guess insertText works in IE11. I tried lots of different text sources including plain text and I could not get paste to work in IE9 at all using insertText. The execCommand fails with "Invalid Argument". |
|
OK, I guess then paste is being cheated in browserstack then - that kind of invalidates my testing methods for paste anyway. I'll patch in your fix as is and get it committed up soon. |
|
+1 for a better solution than both "strip all tags" and "allow all sh*tty tags". I'm not sure "strip all tags" is always a better solution than "allow all sh*tty tags". |
|
Is it possible change text color? Thanks |
|
Please no! -1 |
|
Pushing this out as I want to get v1.2.1 done as it's taken too long. Once all the bugs as of current are fixed we can look at this for the next version. |
|
Re-looking at this later on it doesn't seem that any of the solutions allow for actual conversion from the wierd tags to normal html. The latest master version should allow some copy paste by default but everything else will be cleared out by the sanitizer. Someone care to test this with word and let me know how it goes? |
|
Also if we want some better word parsing I'm going to need someone to post up the HTML that it attempts to paste in or a method of converting word xml to html. I don't have word so until someone does that (or just creates a PR with the logic) I can't actually implement this. |
|
Here is a basic word document I copied. <h1><span lang="EN-US">Header 1<o:p></o:p></span></h1>
<p class="MsoNormal"><span lang="EN-US">Body<o:p></o:p></span></p>
<h2><span lang="EN-US">Header 2<o:p></o:p></span></h2>
<p class="MsoNormal"><span lang="EN-US">Body<o:p></o:p></span></p>
<h3><span lang="EN-US">Header 3<o:p></o:p></span></h3>
<p class="MsoNormal"><span lang="EN-US">Body with <b>bold text, </b><i>and italic, </i><u>and underlined<o:p></o:p></u></span></p>
<p class="MsoListBulletCxSpFirst"><!--[if !supportLists]--><span lang="EN-US" style="font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:
Symbol;mso-ansi-language:EN-US">·<span style="font-stretch: normal; font-size: 7pt; font-family: 'Times New Roman';">
</span></span><!--[endif]--><span lang="EN-US">UL
-> LI1<o:p></o:p></span></p>
<p class="MsoListBulletCxSpMiddle"><!--[if !supportLists]--><span lang="EN-US" style="font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:
Symbol;mso-ansi-language:EN-US">·<span style="font-stretch: normal; font-size: 7pt; font-family: 'Times New Roman';">
</span></span><!--[endif]--><span lang="EN-US">UL
-> LI2<o:p></o:p></span></p>
<p class="MsoListBulletCxSpMiddle"><!--[if !supportLists]--><span lang="EN-US" style="font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:
Symbol;mso-ansi-language:EN-US">·<span style="font-stretch: normal; font-size: 7pt; font-family: 'Times New Roman';">
</span></span><!--[endif]--><span lang="EN-US">UL
-> LI3<o:p></o:p></span></p>
<p class="MsoListBulletCxSpLast"><span lang="EN-US"> </span></p>
<p class="MsoListNumberCxSpFirst"><!--[if !supportLists]--><span lang="EN-US">1.<span style="font-stretch: normal; font-size: 7pt;"> </span></span><!--[endif]--><span lang="EN-US">OL -> LI1<o:p></o:p></span></p>
<p class="MsoListNumberCxSpMiddle"><!--[if !supportLists]--><span lang="EN-US">2.<span style="font-stretch: normal; font-size: 7pt;"> </span></span><!--[endif]--><span lang="EN-US">OL -> LI2<o:p></o:p></span></p>
<p class="MsoListNumberCxSpMiddle"><!--[if !supportLists]--><span lang="EN-US">3.<span style="font-stretch: normal; font-size: 7pt;"> </span></span><!--[endif]--><span lang="EN-US">OL -> LI3<o:p></o:p></span></p>
<p class="MsoListNumberCxSpMiddle" style="margin-left:39.6pt;mso-add-space:auto;
text-indent:-21.6pt;mso-list:l2 level2 lfo3;tab-stops:65.2pt"><!--[if !supportLists]--><span lang="EN-US">3.1.<span style="font-stretch: normal; font-size: 7pt;"> </span></span><!--[endif]--><span lang="EN-US">OL -> LI3.1<o:p></o:p></span></p>
<p class="MsoListNumberCxSpMiddle" style="margin-left:61.2pt;mso-add-space:auto;
text-indent:-25.2pt;mso-list:l2 level3 lfo3;tab-stops:65.2pt"><!--[if !supportLists]--><span lang="EN-US">3.1.1.<span style="font-stretch: normal; font-size: 7pt;"> </span></span><!--[endif]--><span lang="EN-US"> OL -> LI3.1.1<o:p></o:p></span></p>
<p class="MsoListNumberCxSpLast"><!--[if !supportLists]--><span lang="EN-US">4.<span style="font-stretch: normal; font-size: 7pt;"> </span></span><!--[endif]--><span lang="EN-US">OL -> LI4 <o:p></o:p></span></p>It should look something like <h1>Header 1</h1>
<p>Body</p>
<h2>Header 2</h2>
<p>Body</p>
<h3>Header 3</h3>
<p>Body with <strong>bold text, </strong><em>and italic, </em><u>and underlined</u></p>
<ul>
<li>UL -> LI1</li>
<li>UL -> LI2</li>
<li>UL -> LI3</li>
</ul>
<p> </p>
<ol>
<li>OL -> LI1</li>
<li>OL -> LI2</li>
<li>OL -> LI3
<ol>
<li>OL -> LI3.1
<ol>
<li>OL -> LI3.1.1</li>
</ol>
</li>
</ol>
</li>
</ol>
<ol start="4">
<li>OL -> LI4</li>
</ol>Hope that helps |
|
@rasmusvhansen Thanks, it helped as it's a slightly different formatting than what I got out of Word for Mac. |
source: hello how could i drop formatting like style's etc when copy-paste from other sources? just leave html tags? when i send it to server i use regex, but how to be with copy-paste? |
|
To intercept the pasted content you want to use ta-paste. e.g. |
|
Capturing paste is an awesome feature, but I have noticed, that depending on formatting in word, text that is pasted sometimes looses spaces for example. So if you have for example |
|
@jeserkin I'm having a similar issue. Did you figure out exactly what formatting is causing it? It might be fixable with a |
|
@markleusink tried it, but as far as I can see it is sanitizer issue or normal work. There was some workaround posted here in some similar issue, but workaround author isn't sure how will it change the behavior. |
|
I had troubles on pasting text in Windows (on Mac works perfectly), the escape wasn't added, and the bold isn't displayed. scope.modifyHtml = function(html) {
// mac paste like html
if (html.match(/^\<[a-z\!][^\>]+?\>/i)) {
// sanitize from MS Word for Mac
html = html.replace(/(\<br\s?\/?\>)|(\<span\sstyle\=\"mso-spacerun\:yes\"\>[^\>]+\<\/span\>)|\r|\n/gi, ' ');
// windows paste like string
} else {
html = html.replace(/\r|\n/, '<br />');
}
}This added the line break, but the bold is lost while pasting |
|
It's likely that some of the built in preprocessor is doing this. I might try to make it more customizable by using angular.value and expose these functions.
|
So... inevitably, our clients have started trying to paste msword content in to textAngular. So I am just wondering if this is something that has any support?
The text was updated successfully, but these errors were encountered: